处理多个状态更改的最佳方法

如何解决处理多个状态更改的最佳方法

我对反应还很陌生。我正在构建一个运行良好的网络应用程序，但我不确定我是否正确处理状态更改。例如，我有一个在 componentDidMount 中调用的方法。

继续调用 setState 似乎是一种低效和不好的做法，但我不确定是否有更好的方法来做到这一点。

我希望得到一些反馈。

class AuditScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      currentVehicle: null,currentVehicleIndex: 0,vehicles: [],activePictureIndex: 0,show: false,loading: false,next_page: `${props.backend.id}/images`,};
  }

  componentDidMount() {
    this.getimages()
  }


  getimages() {
    if (!this.state.loading) {
      this.setState({
        loading: true,});
      this.registerScrollEvent();
      axios.get(this.state.next_page)
        .then((response) => {
          const paginator = response.data;
          const vehicles = paginator.data.filter((vehicle) => {
            if (vehicle.enhanced && vehicle.enhanced.length) {
              return vehicle;
            }
          });
          if (vehicles && vehicles.length) {
            this.setState({
              vehicles: [...this.state.vehicles,...vehicles],next_page: paginator.next_page_url,});

            if (this.state.currentVehicle === null) {
              this.setState({
                currentVehicle: vehicles[0]
              });
            }
          }

          // remove scroll event if next_page_url is null
          if (!paginator.next_page_url) {
            this.removeScrollEvent();
          }
        })
        .finally((response) => {
          this.setState({
            loading: false,});
        });
    }
  }
}

.....

}

谢谢！

解决方法

如果不想停止在react中调用setState方法，可以使用context for small project或者redux来保持states和reducers与功能组件。最好的问候。

,

就像@Dave Newton 所说的，我不认为这是不好的做法。更新状态不会立即触发更新。相反，状态更新经常（但不总是）批量更新，然后触发单个更新。

This article 详细解释了批处理机制。在 React 17 之前，状态更新批处理只发生在事件处理程序和 componentDidMount 中。他们给出了一个明确的例子，其中“setState 在 componentDidMount 中被调用，这只会导致一个额外的更新（而不是三个）”。

所以 React 已经做了你想要的。 React 18 将让您更好地控制批处理行为，以及更加自动化的批处理。我发现 this description 有助于了解即将发生的事情以及 React 17 及更低版本当前的工作方式。