反应挂钩中的推送方法（useState）？

作者

如何将元素推入useState数组中？
在react状态下，这是一种旧方法吗？还是什么新鲜事

例如，设置状态推送示例

使用useState时，可以获得状态项的更新方法：

const[theArray，setTheArray]=useState（initialArray）；

然后，当需要添加新元素时，使用该函数并传入新数组或将创建新数组的函数。通常是后者，因为状态更新是异步的，有时是批处理的：

设置数组（oldArray=&gt；[…oldArray，newElement]）；

有时，如果您仅更新处理程序中特定用户事件的数组，如单击（但不象鼠标移动），则可以不使用该回调窗体：

设置数组（[…数组，新元素]）；

React确保刷新渲染的事件是；离散事件“；在这里列出

实时示例（将回调传递到setTheArray）：

const{useState，useCallback}=React；
函数示例（）{
const[theArray，setTheArray]=useState（[]）；
常量addEntryClick=（）=&gt{
setTheArray（oldArray=&gt；[…oldArray，`Entry${oldArray.length}`]）；
};
返回[
&lt；input type=“button”onClick={addEntryClick}value=“Add”/&gt；，
&lt；div&gt；{theArray.map（条目=&gt；
&lt；div&gt；{entry}&lt；/div&gt；
)}
&lt；/div&gt；
];
}
ReactDOM.render(
&lt；示例/&gt；，
document.getElementById（“根”）
);
&lt；div id=“root”&gt&lt/部门&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js“&gt&lt/脚本&gt

由于对数组的唯一更新是在单击事件（一个“离散”事件）中的更新，因此我可以在附录中直接更新：

const{useState，useCallback}=React；
函数示例（）{
const[theArray，setTheArray]=useState（[]）；
常量addEntryClick=（）=&gt{
setTheArray（[…theArray，`Entry${theArray.length}`]）；
};
返回[
&lt；input type=“button”onClick={addEntryClick}value=“Add”/&gt；，
&lt；div&gt；{theArray.map（条目=&gt；
&lt；div&gt；{entry}&lt；/div&gt；
)}
&lt；/div&gt；
];
}
ReactDOM.render(
&lt；示例/&gt；，
document.getElementById（“根”）
);
&lt；div id=“root”&gt&lt/部门&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js“&gt&lt/脚本&gt；
&lt；脚本src=”https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js“&gt&lt/脚本&gt

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with