如何在 React 中訪問 Array 中的對象值？

Question

我正在開發一個 React 應用程序，我正在傳遞一個數組，該數組包含每個索引的各種值並將其傳遞給一個道具，但由於某種原因，它沒有顯示我的 h1 內的文本。 我沒有收到錯誤消息，並且我嘗試進行了一些研究，但找不到任何具體信息。

State: var [editTask, setEditTask] = useState([]);

我如何寫入狀態（正常工作）請記住，我只存儲 1 個元素，這永遠不會有多個：

setEditTask([{
  text: todo.text,
  status: todo.status,
  id: todo.id,
  priority: todo.priority,
}]);

我如何嘗試從數組中獲取文本：

return (
  <div>
    <h1>{props.editTask.id}</h1>
  </div>
)

Answer 1

嘗試使用本機 javascript Object.values() 方法。

Answer 2

如果您只存儲一個元素，則不需要對象數組。 可以用單個 object 完成。

const [editTask, setEditTask] = useState({});

useEffect(() => {
  setEditTask({
    ...todo,
  });
}, [todo]);

// Inside component
return (
  <div>
    {Object.values(props.editTask).map((val) => (
      <h1>{val}</h1>
    ))}
  </div>
);

在不改變現有結構的情況下

return (
  <div>{ editTask.map((val) => <h1>{val.status}</h1>)}</div>
);