Блог

Главная - Вопросы по программированию - useState не выполняет повторную визуализацию

useState не выполняет повторную визуализацию

#javascript #reactjs #react-native

Вопрос:

 const [searchText, setSearchText] = useState('')

  const searchHandler = async (searchTextInput) => {
    console.log('search is:::', searchTextInput)
    setSearchText(() => searchTextInput)
  }

  const searchOnSubmitHandler = async () => {
    await loadShopsCount()
    await loadShops()
  }

  const searchClearHandler = async () => {
    setSearchText(() => "")
    console.log('onClear-----------search is:::', searchText)
    await loadShopsCount()
  }

При вызове searchClearHandler после поиска чего- searchText либо возвращает предыдущее значение состояния вместо пустой строки. Следовательно, мой компонент не может выполнить повторную визуализацию.

Как я могу установить searchText пустую строку и повторно отобразить компонент при вызове searchClearHandler ?

Комментарии:

1. Что бы ни вызывало searchClearHandler , оно ожидает завершения до запуска следующего рендеринга. Вызов setVar из useState вызова фактически не изменит значение var в текущем цикле рендеринга, он изменит следующее значение var .

2. Примечание: searchHandler не обязательно должно быть асинхронным, и вашим методам setState не нужно использовать обратный вызов: setSearchText(searchTextInput) и setSearchText('') .

Ответ №1:

Используйте эффект использования.

 useEffect(() => {
    Here your function which you want to call.
  }, [searchText]);

Комментарии:

1. У меня есть компонент панели поиска с реквизитами onChangeText. Если я установлю searchText в качестве зависимости в useEffect, он будет продолжать перенаправлять компонент на каждый ввод символов, что противоречит цели onSubmitEditing (чего я хочу).

2. Что собирается использовать useCallback ??

Метки: