ReactJs：如何執行 function，這取決於在 componentDidUpdate 內部調用的 setState 的結果

Question

我有這個 class 可以為不同的對話加載消息：

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() {}
}

每次用戶單擊新對話時，我都會使用此 function resetMessages 重置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: [],
    });
  }

這樣當 function 之后執行時， 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,
    });
  }

使用值為0的初始state參數page和值為[]的messages ，因為這是一個全新的對話。

我面臨的問題是 function loadAnotherSetOfMessages不是使用重新初始化的 state 參數0和[]而是使用上一個對話的最新值執行的。
例如，如果之前的對話已經加載到第5頁，那么它將使用5而不是0 。
我應該怎么辦？

Answer 1

您不能使用 state，原因是 react 的setState是異步的，這意味着在 state 中設置新值后，您將不得不等待組件的下一次重新渲染以獲取更新的 Z9ED39E2EA93145EF573EZ 值。 如果您在設置后立即嘗試獲取 state 值，您將始終以之前的值結束。

所以最好的辦法是，你將新的 state 值是 arguments 傳遞給你的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)