React中如何修改state数组内指定元素的状态？

Hey there! I see you're having trouble updating a specific element in your reviews array state—let's get this fixed for you.

问题出在哪？ #

你的代码里this.setState({ reviews[2].current: true });有两个关键问题：

1. 语法错误：在对象字面量里不能直接用reviews[2].current作为键名，JavaScript不允许这种写法。
2. 违反state不可变性原则：React要求我们不能直接修改state里的嵌套对象或数组，必须创建新的副本再更新，不然React检测不到state变化，就不会触发组件重新渲染。

正确的修改方式 #

我们需要先复制原数组，再复制要修改的元素并更新属性，最后把新数组传给setState。修改你的change方法如下：

change = () => {
  // 先复制原reviews数组，避免直接修改state
  const updatedReviews = [...this.state.reviews];
  // 复制要修改的元素，更新current属性
  updatedReviews[2] = { ...updatedReviews[2], current: true };
  // 用新数组更新state
  this.setState({ reviews: updatedReviews });
};

完整的组件代码 #

这里是修改后的完整可运行代码：

import React, { Component } from "react";
import { render } from "react-dom";

const reviewsInit = [
  { name: "Peter Lahm", current: null },
  { name: "Simon Arnold", current: null },
  { name: "Claire Pullen", current: null }
];

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      reviews: reviewsInit
    };
  }

  change = () => {
    const updatedReviews = [...this.state.reviews];
    updatedReviews[2] = { ...updatedReviews[2], current: true };
    this.setState({ reviews: updatedReviews });
  };

  render() {
    return (
      <div>
        {console.log(this.state.reviews[2].current)}
        <button onClick={this.change}>click me</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

为什么要这么做？ #

React通过比较state的引用变化来决定是否重新渲染组件。如果直接修改原数组里的对象（比如this.state.reviews[2].current = true），数组和对象的引用都没变化，React会认为state没更新，就不会重新渲染，所以你看不到预期的变化。而我们通过扩展运算符(...)创建新数组和新对象，改变了引用，React就能检测到变化并触发更新啦。

内容的提问来源于stack exchange，提问作者user8758206