函数无法在 JSX 列中呈现注释答案

【问题标题】：Function not able render notes in JSX column函数无法在 JSX 列中呈现注释
【发布时间】：2021-01-26 03:30:01
【问题描述】：

我正在制作一个简单的拖放任务应用程序，并且想了解如何通过调用映射到笔记数组并返回 JSX <Note/> 元素的函数来呈现我拥有的列中的笔记。

这是专栏：

<DragDropContext onDragEnd={handleOnDragEnd}>
    <Column
    dropId={uuidv4()}
    text="To-Do"
      showNotes={displayNotes()}
    />

这里是 notes 数组上的函数映射：

function displayNotes() {
notes.map((note, index) => {
  return (
    <Note key={index} id={uuidv4()} noteContent={note} index={index} />
  );
});

}

当我将 map 方法直接放在 <Column/> 的 showNotes 道具中时，这是有效的。但是一旦我将 map 方法分离到它自己的函数中并在 <Column/> 的 showNotes 道具中调用它，该功能就无法呈现注释。

【问题讨论】：

标签： arrays reactjs jsx

【解决方案1】：

你忘了返回函数吗？

function displayNotes() {
 return notes.map((note, index) => {
  return (
    <Note key={index} id={uuidv4()} noteContent={note} index={index} />
  );
})
};

【讨论】：

就是这样。感谢您的帮助。