如何在 React 的 useState Hook 中将元素推送到数组上？

在 React Hooks 中使用 Push（useState）

使用 React 的 useState hook 时，可以使用 set 函数修改数组状态项提供。这与使用 setState 的旧方法形成对比，后者立即修改整个状态对象。

要将元素推送到数组中，您可以将一个新数组或构造新数组的回调传递给

回调形式（推荐）

此方法是首选，因为它保证 React 将处理可能发生的任何异步更新或批处理：

<code class="javascript">const [theArray, setTheArray] = useState(initialArray);
setTheArray(oldArray => [...oldArray, newElement]);</code>

非回调表单（仅限离散事件）

在您专门更新数组以响应“离散事件”的特定情况下，您可以选择退出回调形式：

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

离散事件

React保证渲染刷新的离散事件是：

• onClick
• onDoubleClick
• onDragStart
• onDragEnd
• onTouchStart
• onTouchEnd
• onContextMenu
• onFocus
• onBlur

示例

下面的示例演示了useState中的push方法：

<code class="javascript">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>

通过使用push使用 useState 中的方法，您可以方便地更新 React 组件中的数组，确保数据流畅高效地流动。

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