如何使用 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中文网其他相关文章！