React：setState更新数组对象后页面未重新渲染，求排查原因

你遇到的页面不更新问题，核心是两个原因导致的，咱们一步步拆解清楚：

1. 子组件的state未同步父组件props的更新 #

你的子组件在constructor里把props.meals赋值给了自身的state.meals，但constructor只会在组件初始化时执行一次。当父组件的meals状态更新后，子组件的props虽然发生了变化，但子组件自己的state不会自动同步更新，页面渲染的始终是初始化时的旧state值。

2. 原地修改数组导致React无法检测状态变化 #

你的shuffle函数是直接在原数组上做元素交换（原地修改），而React的状态更新依赖引用变化来识别更新。因为你修改的是同一个数组引用，哪怕内部元素顺序变了，React做浅比较时会认为state没有变化，自然不会触发重新渲染。

修复方案（推荐的React最佳实践） #

方案一：让父组件统一管理状态，子组件做受控组件 #

状态应该由拥有它的组件（这里是父组件）来维护，子组件只负责触发更新动作，这是React中更清晰的状态管理方式：

1. 修改父组件：添加打乱逻辑，并把更新方法作为回调传给子组件

class ParentComponent extends React.Component {
  state = {
    meals: []
  };

  componentDidMount() {
    this.setState({ 
      meals: [
        { id: 1, name: "Pizza", ingredients: [ "dough", "cheese", "sauce" ] },
        { id: 2, name: "Pasta", ingredients: ["Pasta", "Sauce"] }
      ] 
    });
  }

  // 父组件实现打乱逻辑，注意先复制原数组，避免原地修改
  shuffleMeals = () => {
    const newMeals = [...this.state.meals];
    let currentIndex = newMeals.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = newMeals[currentIndex];
      newMeals[currentIndex] = newMeals[randomIndex];
      newMeals[randomIndex] = temporaryValue;
    }
    this.setState({ meals: newMeals });
  };

  render() {
    return (
      <div>
        {/* 渲染数组项 */}
        {this.state.meals.map(meal => (
          <div key={meal.id}>{meal.name}</div>
        ))}
        {/* 把更新回调传给子组件 */}
        <ChildComponent onGenerate={this.shuffleMeals} />
      </div>
    );
  }
}

2. 修改子组件：移除自身的state，直接调用父组件传递的回调

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.generateNewMealPlan = this.generateNewMealPlan.bind(this);
  }

  generateNewMealPlan() {
    this.props.onGenerate();
  }

  render() {
    return (<button type="button" onClick={this.generateNewMealPlan}>Generate</button>);
  }
}

方案二：若必须在子组件维护state（不推荐，除非特殊场景） #

如果一定要让子组件自己管理meals状态，需要做两处修改：

1. 监听props变化，同步更新子组件state
2. 打乱时创建新数组，避免修改原数组引用

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { meals: [...props.meals] }; // 初始化时复制数组，切断与原数组的引用
    this.generateNewMealPlan = this.generateNewMealPlan.bind(this);
    this.shuffle = this.shuffle.bind(this);
  }

  // 监听props变化，同步更新子组件state
  componentDidUpdate(prevProps) {
    if (prevProps.meals !== this.props.meals) {
      this.setState({ meals: [...this.props.meals] });
    }
  }

  // 修改shuffle函数，返回新数组，不修改原数组
  shuffle(array) {
    const newArray = [...array];
    let currentIndex = newArray.length, temporaryValue, randomIndex;
    while (0 !== currentIndex) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = newArray[currentIndex];
      newArray[currentIndex] = newArray[randomIndex];
      newArray[randomIndex] = temporaryValue;
    }
    return newArray;
  }

  generateNewMealPlan() {
    const newMeals = this.shuffle(this.props.meals);
    this.setState({ meals: newMeals });
  }

  render() {
    return (
      <div>
        {this.state.meals.map(meal => (
          <div key={meal.id}>{meal.name}</div>
        ))}
        <button type="button" onClick={this.generateNewMealPlan}>Generate</button>
      </div>
    );
  }
}

为什么这样能解决问题？ #

• 方案一：父组件统一管理状态，所有更新都通过修改父组件的state触发，React会自动重新渲染所有依赖该state的组件（包括页面上的数组项和子组件）。
• 方案二：通过componentDidUpdate监听props变化同步state，同时shuffle函数返回新数组，保证每次setState的都是新引用，React能准确检测到状态变化并触发重新渲染。

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