在 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保证渲染刷新的离散事件是:
示例
下面的示例演示了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中文网其他相关文章!