ReactJS：更改状态中数组的索引

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 函数（因为 setState 是异步的，新值将取决于状态数组的先前值），在数组上运行 map，返回新对象的条件为真，否则返回同一个对象。

例子：

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