反应子组件不会在状态更新时重新渲染答案

【问题标题】：React child component not re-rendering on state update反应子组件不会在状态更新时重新渲染
【发布时间】：2020-01-01 00:34:03
【问题描述】：

下面的代码是我精简的应用程序。我在父级中有一个锻炼状态，其值位于锻炼 [索引].remainingSets。当通过调用completedSet 函数的onClick 单击子元素时，我会在父元素中更新此值。我在孩子的屏幕上打印这个值，但是当这个值改变时，孩子的打印值不会改变。我看到孩子的道具随着反应扩展而改变，但没有重新渲染/更新。

这是父母的样子。

  const [exercise, setExercise] = useState([]);

  const completedSet = (e, index) => {
    let completedSetExercise = exercise;
    completedSetExercise[index].remainingSets -= 1;
    setExercise(completedSetExercise);
    e.target.style.backgroundColor = '#CD5C5C';
  }
  return(
    <>
      <ExerciseForm onSubmit={onSubmit} />
      {Object.keys(exercise).map(key => <Exercise 
        key={key}
        index={key}
        exercise={exercise[key]}
      />)}
    </>);
}

export default App;```

```import React, {useState, useEffect} from 'react';

const Exercise = (props) => {
    const sets =[]

    for (var i = 0; i < props.exercise.Sets; i++) {
        sets.push(
            <li 
            className="exercise_reps" 
            onClick={(e) => props.completedSet(e, props.index)} 
            key={i}>
            <span> {props.exercise.Reps} </span>
            </li>
        )
    }

    return (
        <div>
            <div className="exercise_title">
                <h2>{props.exercise.Exercise}</h2>
                <button onClick={() => props.removeExercise(props.index)}>Remove Exercise</button>
            </div>
            {props.exercise.remainingSets}
        </div>
    )
}

export default Exercise;

【问题讨论】：

我想知道这是否是 Reacts 对象的浅层比较的问题。也许它没有看到新旧之间的区别，所以它不会重新渲染？
你是对的。我将状态传播到一个数组中，因此该数组将是不同的。现在我的孩子每次都会更新，因为一个新的数组被传递给它。更改的行是这个 let completedSetExercise = [...exercise];
很高兴我能指出正确的方向！

标签： javascript reactjs

【解决方案1】：

问题是我正在制作一个浅拷贝并将其传递给孩子，所以它认为它没有什么不同。在分配之前，我使用了扩展运算符并将状态分配给了一个新变量。 let completedSetExercise = [...exercise] `

【讨论】：