如何使一个函数在另一个函数之前执行

Question

我有一个搜索输入框，希望能实现“实时搜索”，也就是当用户更改输入文本的值时，结果会更新！我使用的是React Native和SQLite作为本地数据库。

现在的问题是，“set_state”函数在“search_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 }}
       />

- Oussama Abdallah

Answer 1

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

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

- Jonathan Meslien

---

谢谢，我尝试了您的回复并且它起作用了，但您能否解释得更详细一些吗？ - Oussama Abdallah

Answer 2

在React中，setState 是异步的

您可以使用回调函数来在setState完成后执行某些操作，如下：

setState之后的回答（Original Answer）：

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
});

- Thomas

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))

- Jonathan Meslien