Question

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

以下是该列：

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

这是注释数组上的函数映射：

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

}

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

Answer 1

您忘记了功能的回报吗？

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

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

1 个答案: