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

Question

我对钩子(Hook)很陌生，所以在这里有一个问题:
我在 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之后重新渲染列表值(value)变化

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>
  );
};