即使條件正確且項目存在，Javascript 映射也返回未定義

Question

handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    discussionList.map((discussion) => {
      if (discussion._id === discussionId) {
        return discussion;
      }
    });

    // return discussionList.filter(
    //   (discussion) => discussion._id === discussionId
    // );
  };

上面是一個函數，用於從討論列表中獲取某個討論。 然而由於某種原因，當我將返回值分配給一個變量時：

const selectedDiscussion = this.handleGetDiscussion(discussionId);

它返回undefined從map功能，即使discussion._id和discussionId存在的，它是真實的（使用控制台日志檢查），但不知何故，而不是返回的discussion ，它返回undefined 。 另一方面，如果我將map函數更改為filter ，它會起作用。 我可以知道這背后的原因是什么嗎？

Answer 1

嘗試

handleGetDiscussion = (discussionId) => {
  const discussionList = [...this.state.discussionList];
  let result;


  discussionList.forEach((discussion) => {
    if (discussion._id === discussionId) {
      result = discussion;
    }
  });

  return result;
};

Answer 2

您的函數沒有返回與返回 undefined 相同的任何內容：

  handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    discussionList.map((discussion) => {
      if (discussion._id === discussionId) {
        return discussion;
      }
    });

    // return discussionList.filter(
    //   (discussion) => discussion._id === discussionId
    // );

    // not returning anything therefore this is the same
    // as returning undefined!
  };

map內部的return是針對(discussion) => {函數，而不是handleGetDiscussion = (discussionId) => { ：

  handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    discussionList.map((discussion) => { <---------------. The return                 
      if (discussion._id === discussionId) {             | belongs to
        return discussion;     --------------------------' this function
      }
    });

    // return discussionList.filter(
    //   (discussion) => discussion._id === discussionId
    // );
  };

如果您只想返回第一個找到的討論，則需要使用常規的for或while循環：

  handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    for (let i=0; i< discussionList.length; i++) {
      let discussion = discussionList[i];                 
      if (discussion._id === discussionId) {
        return discussion;
      }
    }

  };

您不能真正用forEach替換它，因為使用return關鍵字會遇到同樣的問題：

  handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    // WILL NOT WORK:

    discussionList.forEach((discussion) => { <-----------. The return                 
      if (discussion._id === discussionId) {             | belongs to
        return discussion;     --------------------------' this function
      }
    });
  }

但是有一種方法可以在功能上做到這一點 - 使用find ：

  handleGetDiscussion = (discussionId) => {
    const discussionList = [...this.state.discussionList];

    console.log("The discussionList", discussionList);

    return discussionList.find((discussion) => {                 
      return discussion._id === discussionId;
    });
  }

Answer 3

find()是查找單個匹配項（如果 id 是唯一的）或多個匹配項中的第一個（如果 id 不唯一）的方法。 如果 id 不是唯一的並且您想找到所有匹配項，那么filter()是正確的方法。

 let discussionList = [{ id: 1, content: "discussion one" }, { id: 2, content: "discussion two" }, { id: 3, content: "discussion three" }, { id: 1, content: "another discussion with id one" }] function discussionWithId(id) { return discussionList.find(d => d.id === id) } function discussionsWithId(id) { return discussionList.filter(d => d.id === id) } console.log(discussionWithId(2)) console.log(discussionsWithId(1))