javascript - 递增和递减计数器未正确设置状态

Question

我正在尝试创建一个简单的组件来充当计数器!有两个计数器，一个用于计算重复次数，另一个用于计算提升量。出于某种原因，我编写的函数没有按预期工作。

预期的结果是，当我点击向上或向下箭头表示代表时，它应该更新状态中的那个数字。解除的金额也是如此。

但是发生的事情是，当我单击向上和向下箭头时，假设再次重复，它可以正常工作并正确递增和递减，但是当我随后单击箭头递增和递减举起的量时，返回 NaN 并且然后，如果我在那之后单击 rep 箭头，它也会返回 NaN。

这是我的相关代码:

class TrackProgress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: parseInt(this.props.match.params.id),
      exercise: [],
      trackProgress: {
        exercise_id: parseInt(this.props.match.params.id),
        date: "",
        reps: 0,
        amountLifted: 0
      }
    };
  }

  handleChanges = e => {
    this.setState({
      trackProgress: {
        ...this.state.trackProgress,
        [e.target.name]: e.target.value
      }
    });
  };

  repsIncrease = () => {
    this.setState({
      trackProgress: {
        reps: this.state.trackProgress.reps + 1
      }
    });
  };

  repsDecrease = () => {
    this.setState({
      trackProgress: {
        reps: this.state.trackProgress.reps - 1
      }
    });
  };

  amountLiftedIncrease = () => {
    this.setState({
      trackProgress: {
        amountLifted: this.state.trackProgress.amountLifted + 1
      }
    });
  };

  amountLiftedDecrease = () => {
    this.setState({
      trackProgress: {
        amountLifted: this.state.trackProgress.amountLifted - 1
      }
    });
  };

render() {
    return (
      <div className="track-progress-container">
        <div className="track-progress-content">
          <div className="heading">
            <h1>Start Tracking</h1>
            <h2>{this.state.exercise.exerciseTitle}</h2>
          </div>
          <form className="tracking-form-container" onSubmit={this.onSubmit}>
            <div className="rep-lift-flex">
              <div>
                <h6>REPS</h6>
                <input
                  name="reps"
                  type="text"
                  placeholder="OO"
                  value={this.state.trackProgress.reps}
                  onChange={this.handleChanges}
                />
              </div>
              <div>
                <h6>LIFTED</h6>
                <input
                  name="amountLifted"
                  type="text"
                  placeholder="OO"
                  value={this.state.trackProgress.amountLifted}
                  onChange={this.handleChanges}
                />
              </div>
            </div>
            <div className="arrow-container">
              <div className="rep-arrows">
                <img
                  src={down}
                  alt="decrease"
                  name="decrementReps"
                  className={
                    this.state.trackProgress.reps === 0 ? "inactive" : ""
                  }
                  onClick={this.repsDecrease}
                />
                <img
                  src={up}
                  alt="increase"
                  name="incrementReps"
                  onClick={this.repsIncrease}
                />
              </div>
              <div className="lift-arrows">
                <img
                  src={down}
                  alt="decrease"
                  name="decrementLifted"
                  onClick={this.amountLiftedDecrease}
                  className={
                    this.state.trackProgress.amountLifted === 0
                      ? "inactive"
                      : ""
                  }
                />
                <img
                  src={up}
                  alt="increase"
                  name="incrementLifted"
                  onClick={this.amountLiftedIncrease}
                />
              </div>
            </div>
            <h6>Date</h6>
            <input
              name="date"
              type="date"
              placeholder="e.g. June 11, 2019"
              value={this.state.trackProgress.date}
              onChange={this.handleChanges}
              className="date"
            />
            <button type="submit" className="track-btn">
              TRACK EXERCISE
            </button>
          </form>
        </div>
      </div>
    );
  }
}

export default TrackProgress;

在我写出更具体的功能之前，这是我的初始功能。他们都产生了相同的结果。

reps = event => {
    if (event.target.name === "incrementReps") {
      this.setState({
        trackProgress: {
          reps: this.state.trackProgress.reps + 1
        }
      });
    } else if (event.target.name === "decrementReps") {
      this.setState({
        trackProgress: {
          reps: this.state.trackProgress.reps - 1
        }
      });
    }
  };

  amountLifted = event => {
    if (event.target.name === "incrementLifted") {
      this.setState({
        trackProgress: {
          amountLifted: this.state.trackProgress.amountLifted + 1
        }
      });
    } else if (event.target.name === "decrementLifted") {
      this.setState({
        trackProgress: {
          amountLifted: this.state.trackProgress.amountLifted - 1
        }
      });
    }
  };

我可能会遗漏关键逻辑或无法解释某些事情，我已经盯着它看了好几个小时，所以如果能帮助解决这个问题，我们将不胜感激!谢谢!!

Answer 1

当您更新重复次数或提升量时，您将替换整个 trackProgress 对象。你的状态是:

this.state = {
     id: parseInt(this.props.match.params.id),
     exercise: [],
     trackProgress: {
         exercise_id: parseInt(this.props.match.params.id),
         date: "",
         reps: 0,
         amountLifted: 0
     }
}

为 reps 调用您的更新函数或当前替换整个 trackProgress 对象，而不是仅仅更新您想要的属性。

repsIncrease = () => {
    this.setState({
        trackProgress: {
            reps: this.state.trackProgress.reps + 1
        }
    });
}; 

导致:

state = {
     id: 1,
     exercise: [],
     trackProgress: {
         reps: 1,
     }
}

要解决此问题，您可以在 repsIncrease/decrease 函数中包含所有先前的属性，或使用扩展运算符自动填充它们。下面是固定 repsIncrease 函数的示例。

repsIncrease = () => {
    this.setState({
        trackProgress: {
            ...this.state.trackProgress,
            reps: this.state.trackProgress.reps + 1
        }
    });
};