Блог

В примере приложения в функциональном компоненте:

 const [searchApi, results, errorMessage] = useResults();
  

Далее в компоненте визуализируются другие компоненты, и им передаются результаты / сообщения об ошибках. TextInput также может вызывать функцию SearchAPI по завершении,

Соответствующие useResults объявляются внутри useResults.js:

 export default () => {
  const [results, setResults] = useState([]);
  const [errorMessage, setErrorMessage] = useState('');

  const searchApi = async searchTerm => {
//makes a request, depending on the success it either uses setResults or setErrorMessage
  };

  return [searchApi, results, errorMessage];
};
  

Теперь, если SearchAPI устанавливает состояние результатов или сообщения об ошибке внутри самой экспортируемой функции, поскольку я полагаю, что они могут рассматриваться как локальные переменные, а результаты и сообщение об ошибке внутри основного компонента просто получают возвращаемые значения до того, как они даже изменились, тогда как происходит изменение состояния внутри функции?переменные вне него? Другими словами, почему компонент просто повторно рендерится?

Пока функция SearchAPI вызывает либо setResults, либо setErrorMessage, вызываемый перехват реакции уведомит компонент, содержащий перехват, о повторном рендеринге. Это также верно, когда речь идет о пользовательских перехватах, использующих useState.

Такое поведение имеет смысл, потому что, как вы сказали, results и ErrorMessage — это некоторые локальные переменные, которые напрямую не связаны с состоянием. Они представляют собой снимок того, как выглядели состояния при запуске функции рендеринга. Если один из них изменится, единственный способ, которым компонент узнает об изменении, — это повторный рендеринг (и получение новых значений путем вызова перехвата useState).