如何使用 useState 將元素新增至 React Hooks 中的陣列？

React Hooks 中將元素壓入數組（useState）

React Hooks 中處理狀態數組時，傳統方法不再適用。相反，useState 為每個狀態項提供一個更新方法：

const [arrayState, setArrayState] = useState(initialState);

要向arrayState 添加新元素，您可以使用新數組或創建新數組的函數調用setArrayState，通常是後者由於狀態更新的非同步性質：

setArrayState(prevArray => [...prevArray, newElement]);

在某些離散事件中，例如按一下事件，您可以省略回呼：

setArrayState([...arrayState, newElement]);

這是一個實例示範回呼的使用：

<code class="javascript">import React, { useState, useCallback } from "react";

function Example() {
  const [arrayState, setArrayState] = useState([]);
  const addEntryClick = () => {
    setArrayState(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onclick="{addEntryClick}" value="Add">,
    <div>
      {arrayState.map(entry => (
        <div key="{entry}">{entry}</div>
      ))}
    </div>,
  ];
}

ReactDOM.render(<example></example>, document.getElementById("root"));</code>

請記住，key prop 對於在React 中渲染清單以實現高效協調和最佳效能至關重要。

以上是如何使用 useState 將元素新增至 React Hooks 中的陣列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！