ReactJs：如何执行取决于在 componentDidUpdate 内部调用的 setState 的结果的函数答案

【问题标题】：ReactJs: How to execute a function that depends on the result of a setState that's called inside componentDidUpdateReactJs：如何执行取决于在 componentDidUpdate 内部调用的 setState 的结果的函数
【发布时间】：2022-01-02 12:30:54
【问题描述】：

我有这个类可以为不同的对话加载消息：

export class Messages extends Component {
  constructor() {
    super();
    this.state = {
      page: 0,
      results_per_page: 10,
      messages: [],
    };

    this.loadAnotherSetOfMessages = this.loadAnotherSetOfMessages.bind(this);
    this.checkIfUserHasPickedAnotherConversation =
      this.checkIfUserHasPickedAnotherConversation.bind(this);
  }

  componentDidMount() {
    // #NOTE
    // This will load first set of messages for first conversation opened by user
    this.loadAnotherSetOfMessages();
  }
  componentDidUpdate(prevProps, prevState) {
    this.checkIfUserHasPickedAnotherConversation(prevProps);
  }
  loadAnotherSetOfMessages() {
    const { page, results_per_page } = this.state;
    const conv_id = this.props.private_chat.current_chat._id;
    this.props.getXNumberOfMessages(conv_id, page, results_per_page);
    this.setState({
      page: this.state.page + 1,
    });
  }
  checkIfUserHasPickedAnotherConversation(prevProps) {
    const has_user_clicked_a_conversation =
      !!this.props.private_chat.current_chat;

    if (has_user_clicked_a_conversation) {
      const previous_conv_id = prevProps.private_chat.current_chat._id;

      const new_conv_id = this.props.private_chat.current_chat._id;

      const has_user_picked_another_conversation =
        previous_conv_id != new_conv_id;

      if (has_user_picked_another_conversation) {
        this.resetMessages();
        this.loadAnotherSetOfMessages();
      }
    }
  }

  resetMessages() {
    this.setState({
      page: 0,
      messages: [],
    });
  }
  // render() {}
}

每次用户点击新对话，我都会使用resetMessages这个函数重置状态：

  if (has_user_picked_another_conversation) {
    this.resetMessages();
    // This function needs to get executed after the update inside resetMessages has happened
    this.loadAnotherSetOfMessages();
  }

这是它的定义：

  resetMessages() {
    this.setState({
      page: 0,
      messages: [],
    });
  }

这样当函数在它之后执行时，loadAnotherSetOfMessages 的定义如下：

  loadAnotherSetOfMessages() {
    const { page, results_per_page } = this.state;
    const conv_id = this.props.private_chat.current_chat._id;
    this.props.getXNumberOfMessages(conv_id, page, results_per_page);
    this.setState({
      page: this.state.page + 1,
    });
  }

使用初始 state 参数 page 和值 0 和 messages 值 [] 因为这是一个全新的对话。

我面临的问题是函数loadAnotherSetOfMessages不是使用0和[]的重新初始化的状态参数执行的，而是使用最多的上一次对话的最新值。
例如，如果之前的对话已经加载到页面5，那么它将使用5 而不是0。
我该怎么办？

【问题讨论】：

标签： reactjs react-lifecycle react-lifecycle-hooks

【解决方案1】：

你不能使用 state，因为 react 的 setState 是异步的，这意味着你在 state 中设置一个新值后，你将不得不等待组件的下一次重新渲染来获取更新的 state价值。如果您在设置后立即尝试获取状态值，您将始终以之前的值结束。

所以最好的办法是，将新的状态值作为参数传递给 loadAnotherSetOfMessages 函数并使用它。喜欢

loadAnotherSetOfMessages(page, results_per_pag) {
    const conv_id = this.props.private_chat.current_chat._id;
    this.props.getXNumberOfMessages(conv_id, page, results_per_page);
    this.setState({
      page: page + 1,
    });
}

然后这样称呼它

this.loadAnotherSetOfMessages(page, results)

【讨论】：