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

我需要帮助优化这段代码

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");
  }
};

---

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

< P>为了更好的实践，首先你应该避免变异状态，如果你需要在更新状态时从状态中获取值，你应该考虑使用功能状态更新。这将有助于始终获得正确的值

另一个要考虑的是，在设置它之后，你正在使用<代码>。code>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.musts

值的，但是为了获得更好的性能，您可以做一些更改。如果只想修改一个属性，则应将属性上移一级<代码>蘑菇属性在我看来是不必要的

示例数据

而不是像下面这样使用

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");
  }
});

---

为了更好的实践，首先你应该避免变异状态，如果你需要在更新状态时从状态中获取值，你应该考虑使用功能状态更新。这将有助于始终获得正确的值

另一个要考虑的是，在设置它之后，你正在使用<代码>。code>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.musts

值的，但是为了获得更好的性能，您可以做一些更改。如果只想修改一个属性，则应将属性上移一级<代码>蘑菇属性在我看来是不必要的

示例数据

而不是像下面这样使用

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");
  }
});

---

您正在更新ony分数？请使用扩展运算符查看以避免改变原始状态数组。像这样使用spread操作符

constupdatedmushrooms=[…this.state.蘑菇]即使在这种情况下，我们也在更新状态中的完整数组，不是吗？您正在更新ony分数？请使用扩展运算符或查看以避免改变原始状态数组。像这样使用spread操作符
constupdatedmushrooms=[…this.state.蘑菇]即使在这种情况下，我们也在更新状态中的完整数组，不是吗？