Блог

Главная - Вопросы по программированию - React hook не обновляет данные, полученные из функции выборки

React hook не обновляет данные, полученные из функции выборки

#javascript #react-native #react-hooks #fetch

#javascript #react-native #реагирующие хуки #выборка

Вопрос:

Текстовый объект продолжает отображать «Pokemon» вместо pokemon.name . Есть идеи?

 export default function App() {
  const getRandomPokemon = async () => {
    const randomID = Math.floor(Math.random() * 898);
    const uri = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
  
    return fetch(uri)
    .then(response => response.json())
    .then(data => {
      return {
        name: data.forms[0].name,
        height: data.height,
        weight: data.weight,
      };
    })
  }

  const [FirstCard, setFirstCard] = React.useState("Pokemon");

  return (
    <View style={styles.container}>
      <CardStack 
      loop={true} 
      style={styles.cardStack}
      onSwipeStart={async () => {
        const pokemon = await getRandomPokemon();
        setFirstCard(await pokemon.name)
        console.log(pokemon)
      }}
      >
        <Card style={styles.card}><Text>{FirstCard}</Text></Card>
        <Card style={styles.card}><Text>2</Text></Card>
      </CardStack>
    </View>
  );
}

const styles = StyleSheet.create({
  ...
});

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

1. почему вы используете await pokemon.name ? разве это не должно быть просто pokemon.name ?

2. Хотя некоторые элементы синтаксиса не являются необходимыми (как показано в моем ответе ниже), этот код должен в основном работать. См . codesandbox.io/s/sharp-vaughan-pn1uj?file=/src/App.js — что прекрасно работает.

Ответ №1:

Вероятно pokemon.name , это не Promise . await pokemon.name В этом случае вы должны удалить before .

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

1. Не сработало. Кстати, вся правильная информация о покемонах регистрируется.

Ответ №2:

это проблема с используемым вами пакетом. см

github.com/lhandel/react-native-card-stack-swiper/issues/76

вам не нужно ничего ждать, просто извлеките и установите первую карту в функции then.

 export default function App() {
  const [FirstCard, setFirstCard] = React.useState("Pokemon");
  const getRandomPokemon = () => {
    const randomID = Math.floor(Math.random() * 898);
    const uri = `https://pokeapi.co/api/v2/pokemon/${randomID}`;
    fetch(uri)
    .then(response => response.json())
    .then(data => {
        setFirstCard(data.forms[0].name);
    })
  }
  useEffect(()=>{console.log(FirstName);},[FirstCard]);
  return (
    <View style={styles.container}>
      <CardStack 
      loop={true} 
      style={styles.cardStack}
      onSwipeStart={() => {
         getRandomPokemon();
     }}
      >
        <Card style={styles.card}><Text>{FirstCard}</Text></Card>
        <Card style={styles.card}><Text>2</Text></Card>
      </CardStack>
    </View>
  );
}

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

1. Да, это все еще не работает, может ли это иметь какое-то отношение к используемому мной компоненту card? Это из внешнего пакета узла.

2. добавьте useEffect в свой код, чтобы увидеть, обновляется ли имя. смотрите Обновленный код.

3. Да, когда я запускаю код, console.log(FirstCard) он выводит имя покемона, но на карточке все равно написано «Покемон»

4. это означает, что есть проблема с вашим компонентом Card, какой пакет вы используете для этого?

5. react-native-card-stack-swiper