reactjs - React JS - 为什么要单击两次按钮？

Question

我的 ReactJS 应用程序中有一个可以正常工作的搜索功能。我添加了一个“清除搜索”功能，它清除先前在搜索文本中输入的文本，然后使用空搜索文本重新查询，返回到默认选择列表。
搜索字符串中的文本保存在属性中，以便原始搜索结果在编辑条目返回时显示在选择列表中。
我想对“clearSearchString”函数进行如下编码:

   async clearSearchString(value) {
     this.props.updateSearchString('');
     this.searchFromString();
    }

因此重用下面的 searchFromString 函数，它只使用属性中的 searchString 调用搜索(这将在调用 clearSearchString 时重置)；

  async searchFromString () {

     this.setState({isLoading: true});

     fetch(`/api/license/search/${this.props.searchString}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

但是，当我这样做时，第一次单击按钮什么也不做，但第二次单击按钮工作正常。我认为这可能与异步调用有关，但删除 async 修饰符不会改变结果。
有效的是让他们都在自己的方法中进行搜索，即重复代码:

   async searchFromString() {

     this.setState({isLoading: true});

     fetch(`/api/license/search/${this.props.searchString}`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

   async clearSearchString(value) {

     this.props.updateSearchString('');

     this.setState({isLoading: true});

     fetch(`/api/license/search/`, {
        credentials: 'include'})
        .then(response => response.json())
        .then(data => this.setState({
          licenses: data,
          isLoading: false,
          licensePage: data.slice(this.state.begin, this.state.end)

        }))
        .catch(() => this.props.history.push('/'));
    }

有什么问题？为什么需要点击两次才能工作？

Answer 1

状态更新不是立即的(参见 React setState docs )，所以在 this.props.updateSearchString('') 后面的代码中，父搜索字符串状态作为 this.props.searchString 传递给您的组件还没有更新。使用两个独立函数的方法起作用的唯一原因是 clearSearchString没有使用this.props.searchString ，但只是获取 /api/license/search/ .
您可以通过将回调作为第二个参数传递给 setState 来解决此问题。在 updateSearchString (在父组件中)，它将在状态更新后被调用。

function updateSearchString(searchString, callback) {
  ..
  this.setState(.., callback)
  ..
}

并写信 clearSearchString作为

clearSearchString(value) {
  this.props.updateSearchString('', this.searchFromString);
}

另请注意，引用 this.state在 setState参数是一种反模式，应该通过传递更新程序函数来完成(参见相同的 React setState docs )。