React 子组件不会在状态更新时重新渲染

Question

The code below is my slimmed down app. I have an exercise state in the parent which has a value at exercise[index].remainingSets. I update this value in the parent when a child element is clicked by having an onClick which calls completedSet function. I print this value on the screen in the child, but when this value changes the printed value in the child does not change. I see that the props in the child has changed with the react extension but no re-render/update.

This is what the parent looks like.

  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;

Answer 1

Issue was I was making and passing a shallow copy to child so it did not see it as different. I used the spread operator and assigned state to a new variable before assigning it. let completedSetExercise = [...exercise] `