Question

以下代码是我的瘦身应用程序。我的父母有一个运动状态，其运动值为index [remainingSets]。当通过调用completedSet函数的onClick单击子元素时，我会在父元素中更新此值。我在孩子的屏幕上打印此值，但是当此值更改时，孩子中的打印值不会更改。我看到孩子的道具随着react扩展而改变了，但是没有重新渲染/更新。

这就是父母的样子。

  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

问题是我正在制作一个浅色副本并将其传递给孩子，因此它没有什么不同。在分配变量之前，我使用了扩散算子并将状态分配给了一个新变量。 let completedSetExercise = [...exercise] `

React子组件不会在状态更新时重新呈现

1 个答案: