如何通过映射初始列数据并将每个列呈现为<Column />组件来在Task App中呈现多个列

如何解决如何通过映射初始列数据并将每个列呈现为<Column />组件来在Task App中呈现多个列

我正在创建一个小型任务应用程序，似乎无法呈现我需要的三列。 这是列的初始状态：

    const [columns,setColumns] = useState([
    {
      "column-1": {
        title: "To-Do",notes: "",},"column-2": {
        title: "In Progress","column-3": {
        title: "Done",]);

这是我的专栏文章

：

  function Column(props) {
  return (
    <Droppable droppableId={props.dropId}>
      {(provided) => (
          <div
            className="taskColumn"
            {...provided.droppableProps}
            ref={provided.innerRef}
          >
            <p>{props.text}</p>
            <p>{props.showNotes}</p>
            {provided.placeHolder}
          </div>
      )}
    </Droppable>
  );
}

这是我要为列渲染的内容：

return (
    <div>
      <form>
        <p>Add a Task</p>
        <input type="text" value={taskText} onChange={handleChange} />
        <button onClick={handleClick}>Add</button>
      </form>
      <div className="container">
        <DragDropContext onDragEnd={handleOnDragEnd}>
          {columns.map((column) => {
            <Column text={column.title}/>;
          })}
        </DragDropContext>
      </div>
    </div>
  );

我试图映射到列的数组并为每个列渲染一个组件。然后，我只想在第一列中显示初始任务，然后能够将其移至其他列。