Получить API с помощью React Hooks с React Native

Question

Мне удалось загрузить исходное состояние, но когда я пытаюсь отправить новое значение, в форме я получаю неопределенное значение:

const App = () => {
  const [data, setData] = useState({ list: [] });
  const [query, setQuery] = useState('Miami');
  const [search, setSearch] = useState('Miami');
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}&q=${search},us`
      );
      setData(result.data);
      console.log(search);
    };
    console.log(fetchData());

    fetchData();
  }, []);

  return (
    <ScrollView>
      <View>
        <Text>
          To get started, enter a location
        </Text>
        <View>
          <TextInput
            value={query}
            onChangeText={e => setQuery(e)}
          />
          <Button
            type='button'
            title='Fetch!'
            onPress={e => console.log(setSearch(query))}
          />
        </View>
        <View>
          {isLoading ? (
            <Text>Fetching weather...</Text>
          ) : (
            data.list.map(item => <Text key={item.dt}>{item.main.temp}</Text>)
          )}
        </View>
      </View>
    </ScrollView>
  );
};

Сначала загрузите, я получаю данные, затем я пытаюсь изменить город, и я просто получаю неопределенное значение. Почему это?

Я подумал, что если я сделаю setSearch в кнопке onPress, он должен получить значение из поля ввода, нет?

Answer 1

Хук не отображает поиск как зависимость, поэтому он не запускается каждый раз, когда изменяется поисковый термин.

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}&q=${search},us`
      );
      setData(result.data);
      console.log(search);
    };
    console.log(fetchData());

    fetchData();
  }, [ search ]);

Answer 2

Я думаю, что ваша установка верна.

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

console.log(setSearch(query)) //this would give undefined

Сохраняйте свою кнопку как:

      <Button
        type='button'
        title='Fetch!'
        onPress={e => (setSearch(query))}
      />

Изменение состояния определенно происходит на заднем плане.Вам просто нужно обновить useEffect(), чтобы прослушать изменения в состоянии search.Так что теперь useEffect() будет выполняться всякий раз, когда появляется новое значение города.

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}&q=${search},us`
      );
      setData(result.data);
      console.log(search);
    };
    console.log(fetchData());

    fetchData();
  }, [search]);