API检索所有记录时返回对象数组，但过滤时仅返回单个对象

编程问答 2022-08-16

问题描述

首先，我对此非常陌生。我有一个简单的CRUD MERN堆栈应用程序，它使用.map从数据库输出无序的条目列表。我正在尝试实现一个输入框，该输入框可用于基于参数过滤列表。检索所有结果时，一切正常，但是，仅检索到1个结果时，我得到一个错误，即.map不是函数。

TypeError: missions.map is not a function
MissionsList.render
src/Components/missionList.js:121
  118 | <p>All data is test data only</p>
  119 | 
  120 | 
> 121 | <ul className="list-group">
      | ^  122 |   {missions.map((mission,index) => (
  123 |       <li
  124 |         className={
View compiled
▶ 18 stack frames were collapsed.
(anonymous function)
src/Components/missionList.js:77
  74 | searchMsn() {
  75 |   MissionDataService.get(this.state.searchMsn)
  76 |     .then(response => {
> 77 |       this.setState({ missions: response.data });
     | ^  78 |       console.log(response.data);
  79 |     })
  80 |     .catch(e => {

在控制台上，我可以看到API正在工作，并且可以看到检索所有结果时，我正在取回一组对象，而当我仅检索一个结果时，我仅取回了一个对象。我知道这就是为什么它会中断的原因，因为.map仅适用于数组，但我不知道如何解决它。

这是输入框的代码和名为的功能

    <div className="input-group mb-3">

      <input
        type="text"
        className="form-control"
        placeholder="Search by Msn Number"
        value={searchMsn}
        onChange={this.onChangeSearchMsnNumber}
      />

      <div className="input-group-append">

        <button
          className="btn"
          type="button"
          onClick={this.searchMsn}
        >
          Search
        </button>

      </div>
    </div>

  retrieveMissions() {
    MissionDataService.getAll()
      .then(response => {
        this.setState({ missions: response.data });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }

  searchMsn() {
    MissionDataService.get(this.state.searchMsn)
      .then(response => {
        this.setState({ missions: response.data });
        console.log(response.data);
      })
      .catch(e => {
        console.log(e);
      });
  }

  onChangeSearchMsnNumber(e) {
    const searchMsn = e.target.value;
    this.setState({
      searchMsn: searchMsn
    });
  }

这是http.get代码 

   get(msnNumber) {
      return http.get(`/missions/${msnNumber}`);
    }

这是代码的API端

router.get('/:msnNumber',function(req,res,next) {
  Mission.findOne({msnNumber: req.params.msnNumber},function(err,foundMission){
    if (foundMission) {
      res.send(foundMission);
    } else {
      res.send("No missions matching that mission number were found");
    }
  });
});

任何帮助将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

apiapiarraysarraysmernreactjsreactjs