如何在不删除旧状态的情况下设置对象的状态数组

Posted 2023-02-22

【中文标题】如何在不删除旧状态的情况下设置对象的状态数组

【英文标题】：how to set state array of object without removing old state

【发布时间】：2021-09-15 00:35:06

【问题描述】：

如何在不清除初始状态的情况下设置单个数组中的对象数组。

const [arr,setArr]=useState([])

const arr1=[key:'a',value:'a',key:'b',value:'b']
const arr2=[key:'c',value:'c',key:'d',value:'d']

1st cycle setState
setArr((prevState)=>(prevState.push(...arr1)) // required state  arr=[key:'a',value:'a',key:'b',value:'b']

2st cycle setState
setArr((prevState)=>(prevState.push(...arr2)) //  required state arr=[key:'a',value:'a',key:'b',value:'b',key:'c',value:'c',key:'d',value:'d']

【问题讨论】：

你想不停地向数组中添加元素是吗？

【参考方案1】：

在你的情况下，你也可以使用

setArr([...arr, ...arr1]);
setArr([...arr, ...arr2]);

【参考方案2】：

setArr((prevState)=>(prevState.push(...arr1))

push 不会返回修改后的数组，所以你需要确保返回一个数组，比如

setArr((prevState)=> [...prevState, ...arr1])

请注意，您不应该这样做：

setArr((prevState)=> 
    prevState.push(...arr1)  
    return prevState;  // bad
)

因为这会返回一个变异数组（这很糟糕，因为它可能不会导致重新渲染）而不是一个新数组

你也可以在返回之前创建一个新数组

setArr((prevState)=> 
    prevState.push(...arr1)
    return [...prevState]; // good
)

【参考方案3】：

Array#push 返回新数组的length。尝试改用spread operator：

setArr((prevState) => [...prevState, ...arr1]);
setArr((prevState) => [...prevState, ...arr2]);