Question

我有一个搜索输入，我希望进行一次“实时搜索” 我的意思是当用户更改输入文本的值时结果更新！我使用react-native和sqlite作为本地数据库

现在结果是“ set_state”的功能在“ search_user”的功能之后被执行！当我把 user_id“ 2”我没有收到任何结果，但是当我删除“ 2”时我得到了“ 2”的结果，所以我得出结论这两个功能必须先执行第二个功能！如果您还有其他解决方案，或者如何解决此问题，请问？

      searchUser = () => {
    const { input_user_id } = this.state;
    console.log(this.state.input_user_id);
    db.transaction(tx => {
      tx.executeSql(
        'SELECT * FROM table_user where user_id = ?',
        [input_user_id],
        (tx, results) => {
          var len = results.rows.length;
          console.log('len', len);
          if (len > 0) {
            this.setState({
              userData: results.rows.item(0),
            });
          } else {
            alert('No user found');
            this.setState({
              userData: '',
            });
          }
        }
      );
    });
  };

      constructor(props) {
    super(props);
    this.state = {
      input_user_id: '',
      userData: '',
    };
  }

这是我的文本输入

<Mytextinput
         placeholder="Enter User Id"
         onChangeText={input_user_id => {this.searchUser(this); this.setState({ input_user_id });  }}
         style={{ padding:10 }}
       />

Answer 1

为什么不直接将input_user_id传递给函数？否则你可以做

this.setState({input_user_id }, () => this.searchUser(this))

Answer 2

setState in react is asynchronous

您可以在setState以这种方式完成后使用回调做某事-

searchUser(callback_func) => {
    //... code here
    this.setState({
          userData: '',
    }, () => { callback_func(status); });   // status is not required, but you can signify failures this way
}

// now you can use searchUser like this -
searchUser(status => {
    //do this when set state done
});

Answer 3

是的！当你做

function(input_user_id) {
  this.searchUser(this);
  this.setState({ input_user_id })
}

两个函数都按顺序运行，但是setState是异步的。

所以当你这样做

  const { input_user_id } = this.state;

状态尚未更新。

您可以将回调函数传递给setState，

您确保在执行this.searchUser（）之前会更新input_user_id

this.setState({input_user_id }, () => this.searchUser(this))

如何使一个功能先于其他功能

3 个答案: