我想在状态数组的末尾添加一个元素,这是正确的方法吗?

this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });

我担心用push修改数组可能会导致麻烦——它安全吗?

另一种方法是复制数组,setstate看起来很浪费。


当前回答

ES6最简单的方法:

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

其他回答

这对我来说很有用,可以在数组中添加一个数组

this.setState(prevState => ({
    component: prevState.component.concat(new Array(['new', 'new']))
}));

如果你在React中使用功能组件

const [cars, setCars] = useState([{
  name: 'Audi',
  type: 'sedan'
}, {
  name: 'BMW',
  type: 'sedan'
}])

...

const newCar = {
  name: 'Benz',
  type: 'sedan'
}

const updatedCarsArray = [...cars, newCar];

setCars(updatedCarsArray);
this.setState((prevState) => {   
    const newArray = [...prevState.array];   
    newArray[index] = updatedValue;   
    return { array: newArray };   
});

目前很多人都面临着更新useState钩子状态的问题。我使用这种方法来安全地更新它,并想在这里分享它。

这就是我的状态

const [state, setState] = useState([])

假设我有一个对象名为obj1,我想把它附加到我的状态中。我建议这样做

setState(prevState => [...prevState, obj1])

这将安全地在末尾插入对象,并保持状态一致性

如果使用ES6,这是最简单的方法。

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

新数组为[1,2,3,4]

在React中更新你的状态

this.setState({
  arrayvar:[...this.state.arrayvar, newelement]
});

了解关于数组解构的更多信息