如何使用 React 中的 useState 鉤子向數組添加元素？

在React 中使用useState 將元素推入數組

在React 中使用useState 鉤子時，您可以透過呼叫其update 呼叫狀態數組方法。此方法在初始化狀態項目時提供，如：

<code class="js">const [theArray, setTheArray] = useState(initialArray);</code>

要為陣列新增元素，請將更新後的陣列或產生新陣列的函數傳入 setTheArray 方法。通常使用後者，因為 React 中的狀態更新是非同步的，並且可能批量發生。

<code class="js">setTheArray(oldArray => [...oldArray, newElement]);</code>

或者，如果您僅在特定使用者事件的處理程序中進行更新（例如單擊），則此快捷語法可能就足夠了，但不是滑鼠移動）：

<code class="js">setTheArray([...theArray, newElement]);</code>

React 中觸發渲染刷新的事件稱為「離散事件」。

實例：

<code class="js">const { useState, useCallback } = React;
function Example() {
  const [theArray, setTheArray] = useState([]);
  const addEntryClick = () => {
    setTheArray(oldArray => [...oldArray, `Entry ${oldArray.length}`]);
  };
  return [
    <input type="button" onClick={addEntryClick} value="Add" />,
    <div>
      {theArray.map(entry => <div>{entry}</div>)}
    </div>
  ];
}

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

以上是如何使用 React 中的 useState 鉤子向數組添加元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！