如何使用 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 />, document.getElementById("root"));</code>

请记住，key prop 对于在 React 中渲染列表以实现高效协调和最佳性能至关重要。

以上是如何使用 useState 将元素添加到 React Hooks 中的数组？的详细内容。更多信息请关注PHP中文网其他相关文章！