当我想修改数组状态时，我也遇到了类似的问题 同时保留元素在数组中的位置

这是一个在like和different之间切换的函数:

    const liker = (index) =>
        setData((prevState) => {
            prevState[index].like = !prevState[index].like;
            return [...prevState];
        });

正如我们所说，函数接受数组状态元素的索引，然后我们继续修改旧状态并重建状态树

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

这就是我的状态

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

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

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

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

//get the value you want to add
const valor1 = event.target.elements.valor1.value;

//add in object 
        const todo = {
            valor1,
        }

//now you just push the new value into the state

//prevlista is the value of the old array before updating, it takes the old array value makes a copy and adds a new value

setValor(prevLista =>{
return prevLista.concat(todo) })
     

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]
})

对于添加到数组中的新元素，push()应该是答案。

对于删除元素和更新数组的状态，下面的代码适用于我。拼接(索引，1)不能工作。

const [arrayState, setArrayState] = React.useState<any[]>([]);
...

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

这段代码为我工作:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
    this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
  })