useMemo on .map 语句中使用的函数

Question

我对 hooks 还很陌生，所以这里有一个问题：我在 React 组件函数中有像

const getSection = assignmentSectionId => {
    const findSection = sections.find(
      section => section.sectionRefId === assignmentSectionId,
    );

    return findSection ? findSection.name : '';
  };

现在我得到了在该函数上使用 useMemo 的建议。目前我正在使用类似：

return (
    <List
      role="list"
      aria-label={ariaLabel}
    >
      {assignments.map(assignment => {
        const sectionName = getSection(assignment.sectionId);

        return (
          <Card
            name={sectionName}
          />
        );
      })}
    </List>
  );
};

如果可能的话，在这里使用 useMemo 的最佳（最佳）方法是什么？

Answer 1

您可以使用Array#map内部。它仅在值更改useMemo后重新渲染列表assignments

const memoList = React.useMemo(()=> assignments.map(assignment => {
        const sectionName = getSection(assignment.sectionId);
        return (<Card  name={sectionName}/>)
      }),[assignments])

return (
    <List role="list" aria-label={ariaLabel}>{memoList}</List>
  );
};