reactjs - 不渲染项目 React useState

Question

我想添加新任务，但它们没有呈现，这是我的代码的这一部分：

  setItemsFromBackend([...itemsFromBackend, {id: uuidv4(), content: text }]);


  setText("")
}

const [itemsFromBackend, setItemsFromBackend] = useState([{ id: uuidv4(), content: "First task" }]);

const [text, setText] = useState("");

const columnsFromBackend = {

  [uuidv4()]: {
    name: "Requested",
    items: itemsFromBackend,
  },
  [uuidv4()]: {
    name: "To do",
    items: [],
  },
  [uuidv4()]: {
    name: "In Progress",
    items: [],
  },
  [uuidv4()]: {
    name: "Done",
    items: [],
  },
};

<div>
        <input type="text" value={text} onChange={(e) => setText(e.target.value)}/>
        <button onClick={addItem}>Add</button>
</div>

这是代码沙箱中的完整项目：

https://codesandbox.io/s/trello-task-yhbmu?file=/src/Kanban.jsx

任何帮助将不胜感激。谢谢！

标签： reactjs

Answer 1

setItemsFromBackend({ ...itemsFromBackend, id: uuidv4(), content: text });

itemsFromBackend是一个数组，所以你在错误的地方传播。尝试这个：

setItemsFromBackend([...itemsFromBackend, {id: uuidv4(), content: text }]);