Блог

Главная - Вопросы по программированию - Результат вызова Rest API не отображается в react native, как это исправить?

Результат вызова Rest API не отображается в react native, как это исправить?

#react-native #api #axios

Вопрос:

У меня есть существующий собственный компонент React, в котором я отображаю среднюю цену монет, полученную из других функций в том же файле js.

Сегодня я подумал о том, чтобы повысить его рыночную стоимость, и использовал API, доступный в Интернете.

Когда я работал нормально, он работает, но в реакции он возвращает NAN.

Моя функция рендеринга.

 const renderCoin = ({ item, index }) => {
    console.log("---Inside render coin---"   item.text);
    let { averagePrice, totalCost, totalCount } = orderListData(
      item.text,
      userID,
      orders
    );
    let marketPrice = goForAxios(item.text);
    console.log(`${item.text} = ${marketPrice}`);
    return (
      <View style={[styles1.rowFront, { flexDirection: "row" }]}>
        <TouchableWithoutFeedback
          onPress={() =>
            props.navigation.navigate("Orders", {
              coin: item.text,
              userID: userID,
            })
          }
          style={{ flex: 1 }}
        >
          <Text>
            {item.text} {round(averagePrice)} {round(totalCost)}{" "}
            {round(totalCount)} {marketPrice}
          </Text>
        </TouchableWithoutFeedback>
        <TouchableOpacity
          onPress={() => onDeleteCoin(item.id)}
          style={{ flex: 1 }}
        >
          <Icon name={"trash"} size={30} color="#900" />
        </TouchableOpacity>
      </View>
    );
  };

И функция, используемая для вызова rest API.

 const goForAxios = async (coin) => {
    

    const response = await axios.get(
      `https://min-api.cryptocompare.com/data/price?fsym=${coin}amp;tsyms=INR`
    );
    console.log(response.data.INR.toString());
    return response.data.INR.toString();
  };

Пожалуйста, предложите альтернативу, если мой подход сам по себе неверен.

Ответ №1:

Функция goForAxios возвращает обещание. Таким образом, вы не можете отобразить значение до тех пор, пока Обещание не будет выполнено.

Как насчет того, чтобы создать новое состояние и обновить его после получения ответа API?

 const RenderCoin = ({ item, index }) => {

    console.log("---Inside render coin---"   item.text);
    let { averagePrice, totalCost, totalCount } = orderListData(
      item.text,
      userID,
      orders
    );

    // new state to keep the response
    const [marketPrice, setMarketPrice] = useState(0);
    
    // make api request when the component mounts
    useEffect(()=> {
      (async () => {
        const marketPrice = await goForAxios(item.text);
        setMarketPrice(marketPrice);
      })();
    }, []);
    
 
    return (
      ....
    )

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

1. Там будет несколько монет для извлечения, и я подумал вызвать эту функцию, как вы можете видеть, я вызываю ее при рендеринге let marketPrice = goForAxios(item.text); Поэтому, если я установлю состояние, это приведет к повторному запуску страницы несколько раз правильно и может привести к повторному вызову. Кроме того, я сохранил ожидание в функции, почему она все еще возвращает обещание?

2. Попробовал ваш код и получил эту ошибку: Ошибка: Недопустимый вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин: 1. У вас могут быть несоответствующие версии React и средства визуализации (например, React DOM) 2. Вы можете нарушать правила крючков 3. У вас может быть более одной копии React в одном и том же приложении, мой код, который я сохранил здесь, вы можете проверить, пожалуйста: codeshare.io/AdZByw

3. Даже если вы используете функцию wait в goForAxios, функция RenderCoin не будет ждать ответа, потому что RenderCoin не является асинхронной функцией… Гофораксиос возвращает обещание.

4. И да, вы можете использовать крючки только в компонентах. Вот почему я превратил ваш рендерКоин в R эндерКоин (сделайте первую букву заглавной), чтобы React мог видеть его как компонент.

5. Все та же проблема, я изменился в соответствии с вашим предложением. codeshare.io/X8AXel

Метки: ,