使用时
useState,可以获得状态项的更新方法:
const [theArray, setTheArray] = useState(initialArray);
然后,当您要添加新元素时,可以使用该函数并传入新数组或将创建新数组的函数。通常情况下是后者,因为状态更新是异步的,有时是分批的:
setTheArray(oldArray => [...oldArray, newElement]);
有时,如果您 仅针对某些特定的用户事件
click(例如,但不喜欢
mousemove)更新处理程序中的数组,则无需使用回调形式就可以摆脱困境:
setTheArray([...theArray, newElement]);
React保证刷新渲染的事件是此处列出的“离散事件” 。
实时示例(将回调传递给
setTheArray):
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"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
因为唯一的更新
theArray是
click事件中的一个(“离散”事件之一),所以我可以通过直接更新来解决
addEntry:
const {useState, useCallback} = React;function Example() { const [theArray, setTheArray] = useState([]); const addEntryClick = () => { setTheArray([...theArray, `Entry ${theArray.length}`]); }; return [ <input type="button" onClick={addEntryClick} value="Add" />, <div>{theArray.map(entry => <div>{entry}</div> )} </div> ];}ReactDOM.render( <Example />, document.getElementById("root"));<div id="root"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)