React中如何向对象数组添加新对象并存储到新变量newArray中

原有代码存在两处语法问题：

• useState声明时缺少参数分隔逗号，且括号未闭合
• onClick回调中未实现数组拼接、赋值逻辑

基础实现（newArray为普通变量） #

// 修正useState语法
const [fruits, setFruits] = useState([{name: "sam"}, {name: "jhon"}])
      
let newArray = []

const onClick = () => {
    // 基于原数组生成新数组，追加目标对象
    newArray = [...fruits, {name: "rock"}]
    // 若需要同步更新原fruits状态可补充下方代码，无需则省略
    // setFruits(newArray)
}

执行后newArray的结果为 [{name: "sam"}, {name: "jhon"}, {name: "rock"}]，符合预期。这里使用数组扩展运算符...生成新数组，不会修改原状态数组，符合React状态不可变的开发规范。

持久化存储实现（避免组件重渲染时newArray被重置） #

如果需要newArray在组件重渲染后仍保留值，可以将其声明为状态变量：

const [fruits, setFruits] = useState([{name: "sam"}, {name: "jhon"}])
const [newArray, setNewArray] = useState([])

const onClick = () => {
    const updatedArr = [...fruits, {name: "rock"}]
    setNewArray(updatedArr)
    // 同步更新原fruits状态可补充下方代码
    // setFruits(updatedArr)
}

内容的提问来源于stack exchange，提问作者ASIF KAIF