onChange 仅在 2 个文本输入后触发

Question

我的 "TextInput" 有一个奇怪的行为。我正在尝试根据 TextInput 条目过滤 ListView：

export default class SearchTabScreen1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText:'',
      data:[]
    };
}

setSearchText(event) {
    var reset = realm.objects('User');
    if (this.state.data !== reset){
    this.setState({
      data:realm.objects('User')
    });

    const searchText = event.nativeEvent.text;
    this.setState({searchText:searchText});
    console.log(this.state.searchText);

    var searchString = this.state.searchText;
    if(searchString != ""){
      let searchResult = realm.objects('User').filtered('name BEGINSWITH[c] [=10=]', searchString);
      var filteredData = searchResult;

      this.setState({
        data : filteredData
      });
      console.log("FILTERED", filteredData);
    }
  }
}

render() {
      return (
        <View style={{flex: 1, padding: 20}}>
          <TextInput
            ref="recherche"
            placeholder="Search"
            autoCorrect={true}
            returnKeyLabel="search"
            underlineColorAndroid="black"
            value = {this.state.searchText}
            onChange={this.setSearchText.bind(this)}
          />
          <ListViewDico
            navigator={this.props.navigator}
            dataFromParent={this.state.data}
          />
        </View>

问题是当我键入 'L' 时，例如，在 TextInput 中，日志：console.log(this.state.searchText); 什么也没显示。

只有在我输入第二个字符（无论是什么）之后，日志才会显示此 'L'。

我总是在 "t+1 entry" 收到回复。

我希望得到一些帮助，谢谢。

Answer 1

发生这种情况的原因是 setState 不会立即改变状态，而是需要时间，并且由于 Javascript 是异步的，所以 console.log() 在状态改变之前执行因此你不会得到更新的值，只有在下次你看到旧值时执行它。解决方法是在setState callback中调用console.log()。

 this.setState({searchText:searchText}, () => {
     console.log(this.state.searchText);
 });

代码：

setSearchText(event) {
    var reset = realm.objects('User');
    if (this.state.data !== reset){
    this.setState({
      data:realm.objects('User')
    });

    const searchText = event.nativeEvent.text;
    this.setState({searchText:searchText}, function() {
         console.log(this.state.searchText);
    });


    var searchString = searchText;
    if(searchString != ""){
      let searchResult = realm.objects('User').filtered('name BEGINSWITH[c] [=11=]', searchString);
      var filteredData = searchResult;

      this.setState({
        data : filteredData
      }, function() {
          console.log("FILTERED", filteredData);
      });

    }
  }
}

onChange 仅在 2 个文本输入后触发

onChange triggers only after 2 text inputs

javascript

listview

textinput

reactjs

react-native