Попытка использовать fetch с хуками на реагирующем нативном проекте. Ошибка => Нарушение инварианта: объекты недопустимы в качестве дочернего элемента React - PullRequest
Новая
       8

Попытка использовать fetch с хуками на реагирующем нативном проекте. Ошибка => Нарушение инварианта: объекты недопустимы в качестве дочернего элемента React

0 голосов
/ 17 апреля 2020

как дела?

Я новичок ie, стараюсь изо всех сил здесь разработать простое приложение, в котором я должен использовать API для получения некоторых данных об одной стране. В настоящее время я пытаюсь выяснить, как сделать это в реагировать нативно с использованием хуков и метода выборки. API, который я использую: https://restcountries.eu/

Вот пример кода: 

import React, {useState, useEffect} from 'react';
import { Text, StyleSheet, View, ActivityIndicator,FlatList } from 'react-native';


const MainInfoScreen = () => {

  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState({});

  useEffect(() => {
    fetch('https://restcountries.eu/rest/v2/callingcode/82')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  });

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={data}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item}</Text>
          )}
        />
      )}
    </View>
  );
};


const styles = StyleSheet.create({});

export default MainInfoScreen;

И вот ошибка: 

Invariant Violation: Objects are not valid as a React child (found: object with keys {name, topLevelDomain, alpha2Code, alpha3Code, callingCodes, capital, altSpellings, region, subregion, population, latlng, demonym, area, gini, timezones, borders, nativeName, numericCode, currencies, languages, translations, flag, regionalBlocs, cioc}). If you meant to render a collection of children, use an array instead.

Для если честно, то дело даже не в том, чтобы перечислять данные в FlatList, я просто хотел получить некоторые специфические c данные и поместить их в переменные для использования в моем приложении, чтобы показать, что я могу получить это из API. Компонент ListItem используется только тогда, когда я пытался следовать другому учебнику, который отлично работал с одним API, но не с тем, который я использую по какой-то причине.

Я считаю, что основная причина в том, что мне нужно отобразить эти данные, так как я считаю, что я могу работать с массивом, но, опять же, я не слишком уверен.

1 Ответ

0 голосов
/ 17 апреля 2020

Предупреждающее сообщение дает вам подсказку. Вы не можете отобразить объект как дочерний элемент React. Но вы можете использовать JSON.stringify() для визуализации объекта, таким образом вы можете выяснить, что и как вы хотите визуализировать информацию, содержащуюся в этом объекте.

Пример ниже написан на обычный React (Stackoverflow не может отобразить собственный код). Но функциональность такая же. <div> будет эквивалентно <View>. 

function App() {
  
  const [ data, setData ] = React.useState(null)
  
  React.useEffect(() => {
    fetch('https://restcountries.eu/rest/v2/callingcode/82')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
  }, [])


  return (
    <div>
      {JSON.stringify(data)}
    </div>
  )
}


ReactDOM.render(<App />, document.getElementById('root'))
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Итак, в вашем коде вы должны написать: 

<View>
  <Text>{JSON.stringify(data)}</Text>
</View>
...