значение setState передается функции до второго onPress

Question

Я хочу реализовать эти кнопки для запуска одной и той же функции, но с разными значениями query, теперь она работает, но параметр не передается в функцию searchfunc:

  searchfunc = () => {

  const { query } = this.state;
  let url = "http://url/api/?q=" + query
  Keyboard.dismiss()

  fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        data: responseJson.results,
      });
    })
};

Мой кодвыглядит следующим образом:

<TouchableOpacity
onPress={() => {
    this.setState({query: 'donut'});
    this.searchfunc();          }}
>
<Text>Donuts</Text>
</TouchableOpacity>

На втором onPress я получил результаты пончиков, которые я ожидал.Может кто-нибудь помочь, пожалуйста?

Answer 1

Я бы посоветовал вам передать запрос в качестве параметра функции, чем сохранять его в состоянии. Поскольку setState работает асинхронно и выполняет пакетное обновление. Так что может случиться так, что состояние запроса не будет последним при выполнении вызова API.

Answer 2

Метод setState предлагает обратный вызов , который запускается после применения изменения состояния (т. Е. {query:'donut'}).

Вы можете использовать этот обратный вызов для решения вашей проблемы, выполнив следующую настройку:

<TouchableOpacity onPress={ () => { 
    this.setState({query: 'donut'}, () => this.searchfunc());
}}>
    <Text>Donuts</Text>
</TouchableOpacity>

Это приведет к вызову this.searchfunc() после изменения состояния this.setState({query:'donut'} ..вступил в силу.