使用useState钩子创建了一个名为objectArray的状态和一个名为setObjectArray的更新函数。初始时,objectArray为空数组。
在handleAddObject函数中,创建一个新的对象并赋值给newObject变量。然后,在调用setObjectArray更新函数时,使用展开运算符将新对象添加到原有数组中,从而生成一个新的包含新对象的数组。
最后,在组件的返回部分,渲染了一个按钮,并将handleAddObject函数绑定到该按钮的点击事件。当用户点击按钮时,会触发handleAddObject函数,从而将新对象添加到objectArray数组中。
import React, { useState } from 'react'; const YourComponent = () => { const [objectArray, setObjectArray] = useState([]); const handleAddObject = () => { const newObject = { name: 'John', age: 25 }; setObjectArray(prevArray => [...prevArray, newObject]); }; return ( <div> <button onClick={handleAddObject}>添加对象</button> <ul> {objectArray.map((obj, index) => ( <li key={index}>{obj.name} - {obj.age}</li> ))} </ul> </div> ); } export default YourComponent;