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

【问题标题】：API returns array of objects when retrieving all records but only a single object when filteringAPI 在检索所有记录时返回对象数组，但在过滤时仅返回单个对象
【发布时间】：2020-08-17 14:15:27
【问题描述】：

首先，我对这一切都很陌生。我有一个简单的 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");
    }
  });
});

任何帮助将不胜感激。

【问题讨论】：

标签： arrays reactjs api mern

【解决方案1】：

我能够通过使用 Mission.find 而不是 findOne 来解决这个问题。即使只有一个结果，find 似乎也会返回一个对象数组，而 findOne 总是只返回一个对象。

【讨论】：