我想在状态数组的末尾添加一个元素,这是正确的方法吗?
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
我担心用push修改数组可能会导致麻烦——它安全吗?
另一种方法是复制数组,setstate看起来很浪费。
我想在状态数组的末尾添加一个元素,这是正确的方法吗?
this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });
我担心用push修改数组可能会导致麻烦——它安全吗?
另一种方法是复制数组,setstate看起来很浪费。
当前回答
//------------------code is return in typescript
const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {
setItems(old => old.map((row, index) => {
if (index === rowIndex) {
return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
}
return row;
}));
其他回答
React文档说:
对待这个问题。状态,仿佛它是不可变的。
您的推送将直接改变状态,这可能会导致容易出错的代码,即使您随后再次“重置”状态。例如,它可能导致一些生命周期方法(如componentDidUpdate)无法触发。
在以后的React版本中,推荐的方法是在修改状态时使用updater函数来防止竞争条件:
this.setState(prevState => ({
arrayvar: [...prevState.arrayvar, newelement]
}))
与使用非标准状态修改可能面临的错误相比,内存“浪费”不是一个问题。
早期React版本的替代语法
你可以使用concat来获得一个干净的语法,因为它返回一个新数组:
this.setState({
arrayvar: this.state.arrayvar.concat([newelement])
})
在ES6中,你可以使用扩展操作符:
this.setState({
arrayvar: [...this.state.arrayvar, newelement]
})
目前很多人都面临着更新useState钩子状态的问题。我使用这种方法来安全地更新它,并想在这里分享它。
这就是我的状态
const [state, setState] = useState([])
假设我有一个对象名为obj1,我想把它附加到我的状态中。我建议这样做
setState(prevState => [...prevState, obj1])
这将安全地在末尾插入对象,并保持状态一致性
我试图在数组状态下推值,并像这样设置值,并通过映射函数定义状态数组和推值。
this.state = {
createJob: [],
totalAmount:Number=0
}
your_API_JSON_Array.map((_) => {
this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
return this.setState({createJob: this.state.createJob})
})
当我想修改数组状态时,我也遇到了类似的问题 同时保留元素在数组中的位置
这是一个在like和different之间切换的函数:
const liker = (index) =>
setData((prevState) => {
prevState[index].like = !prevState[index].like;
return [...prevState];
});
正如我们所说,函数接受数组状态元素的索引,然后我们继续修改旧状态并重建状态树
//------------------code is return in typescript
const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {
setItems(old => old.map((row, index) => {
if (index === rowIndex) {
return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
}
return row;
}));