Question

我需要帮助优化此代码

eatMushroom = (foundMushroom, startTime, steps) => {
  const updatedMushrooms = this.state.mushrooms;
  updatedMushrooms[foundMushroom.key].remaining = false;
  this.setState({
    mushrooms: updatedMushrooms,
    score: this.state.score + 1
  });

  if (this.totalMushrooms === this.state.score) {
    this.props.setTotalTime(startTime, steps);
    this.props.history.push("/score");
  }
};

我在替换状态中的完整数组时会对性能造成影响，而我只是想更新单个项目。

Answer 1

首先，为了更好的练习，你应该避免改变状态，如果你在更新状态时需要来自状态的值，你应该考虑使用功能状态更新。这将有助于始终获得正确的值。

要考虑的另一件事是您在设置后正在使用this.state.score。 setState是异步的，可以在执行if语句后发生。为此，您应该考虑使用回调。

以下是您的代码的修改版本以及上述建议;

this.setState((prevState) => {
  const mushrooms = Object.assign({}, prevState.mushrooms);
  mushrooms[foundMushroom.key].remaining = false;
  return { mushrooms, score: (prevState.score + 1) };
}, () => {
  if (this.totalMushrooms === this.state.score) {
    this.props.setTotalTime(startTime, steps);
    this.props.history.push("/score");
  }
});

我不知道你是如何使用this.state.mushrooms值的，但为了获得更好的性能，你可以做一些改变。如果您只想修改一个属性，那么您应该将属性向上移动一级。我认为mushrooms财产是不必要的。

示例数据

而不是使用下面的

this.state = {
  mushrooms: {
    mushA: {
      remaining: true
    },
    mushB: {
      remaining: false
    },
    mushC: {
      remaining: true
    }
  }
};

你可以这样使用

this.state = {
  mushA: {
    remaining: true
  },
  mushB: {
    remaining: false
  },
  mushC: {
    remaining: true
  }
};

这样您可以像下面一样更新您的状态。一次一个属性，我相信这会带来更好的性能更新。

this.setState((prevState) => {
  const mushroom = Object.assign({}, prevState[foundMushroom.key], { remaining: false });
  return { [foundMushroom.key]: mushroom, score: (prevState.score + 1) };
}, () => {
  if (this.totalMushrooms === this.state.score) {
    this.props.setTotalTime(startTime, steps);
    this.props.history.push("/score");
  }
});

如何在设置状态时更新数组中的项目

1 个答案: