Question

当我使用 semantic-ui-react（版本：0.78.3）时遇到了问题。我试图在Dropdown中使用onSearchChange函数。我在this.setState函数中使用onSearchChange更改了状态。

但是当我输入第一个字母时，查询状态根本不会改变（仍为空）。当我输入第二个字母时，查询状态将变为第一个字母。

以下是代码：

class SearchBookForm extends Component {
  state = {
    query: '',
    loading: false,
    options: [{
      key: 1,
      value: 1,
      text: 'first book'
    }]
  }

  onSearchChange = (e, data) => {
    
    // log four different variables before this.setState
    console.log(data.searchQuery)
    console.log(this)
    console.log(this.state.query)
    console.log(this.state.loading);
    
    this.setState({ query: data.searchQuery, loading: !this.state.loading });

    // log one variable after this.setState
    console.log(this.state.query)
  }

  render(){
    return (
      <Form>
        <Dropdown
          search
          fluid
          placeholder="Search for a book by title"
          onSearchChange={this.onSearchChange}
          options={this.state.options}
          loading={this.state.loading}
        />
      </Form>
    )
  }
};

为了更清楚，我在onSearchChange函数中记录了四个变量，当我在表单中键入“p”时，日志结果如下：Log result 1

data.searchQuery更改为p。在this中，虽然this.setState位于函数末尾，但其状态（查询和加载）已更改。但是第三和第五个变量this.state.query都没有，第四个变量this.state.loading也没有变化。

当我输入第二个字母“l”时，this.state.query会变为“p”，this.state.loading也会发生变化。似乎setState工作，但总是落后。结果图片在这里：Log result 2

我希望我的解释有意义。我感到很困惑。它是语义反应中的错误吗？ onSearchChange函数的逻辑是什么？

State没有在reactjs中更新

0 个答案: