Question

我正在尝试在React状态下更新数组的索引。问题是我无法使用setState()方法访问数组的索引。

我的代码如下：

handleLike(post) {
        axios.get(`/likes/${post}`)
            .then(response => {
                this.state.posts.forEach((entry, index) => {
                    if (entry.id === post) {
                        this.setState({posts[index]: response.data})
                    }
                })
            })
    }

我希望使用响应数据来更新数组内容，但会引发错误。如何在React状态下更新数组的索引？

Answer 1

在setState中设置数据的方式不正确。像这样写：

handleLike(post) {
  axios.get(`/likes/${post}`)
    .then(response => {
      this.setState(prevState => ({ 
         posts: prevState.posts.map(el => el.id == post? response.data: el) 
      }))
    })
}

为什么您的代码不起作用？

因为posts[index]将是一个值（对象），而不是正确的JS键。

要更新状态中的任何值，您需要首先克隆它，进行更改，然后将更新后的值传递给setState方法中的正确键。

由于要更新对象数组中的单个对象，请使用updater function（因为setState是async且新值将取决于状态数组的先前值），请在数组上运行map，然后返回新对象为真实条件，否则返回相同的对象。

示例：

let stateArr = [{a:1, id:1}, {a:2, id:2}, {a:3, id:3}]

let newObj = {a: 10, id: 2}
const key = 2;

let newStateArr = stateArr.map(el => el.id == key? newObj: el);

console.log('old array', stateArr);
console.log('new array', newStateArr);

Answer 2

尝试一下

...
if (entry.id === post) {
    // get all of the posts in a new variable
    let newPost = [...post]
    // set only the index you want
    newPost[index] = response.data
    // set newPost to the state
    this.setState({post: newPost})
}

ReactJS：在状态下更改数组的索引

2 个答案: