Получение данных в консоли, но невозможность видеть данные вызова API на экране React Native - PullRequest
Новая
       81

Получение данных в консоли, но невозможность видеть данные вызова API на экране React Native

1 голос
/ 29 мая 2020

Привет, я новичок, чтобы реагировать на родные. Я пытаюсь вызвать любой api и не вижу никаких данных на экране приложения, но могу видеть данные на консоли. Я думаю, что эта проблема связана с моим состоянием, но всякий раз, когда я пытаюсь добавить что-нибудь в состояние, он дает мне ответ: «json .data» не является объектом. Пожалуйста, помогите мне в этом. Заранее спасибо. 

export default App = () => {
    const [isLoading, setLoading] = useState(true);

    const [data, setData] = useState([]);

    useEffect(() => {
      fetch('https://URL', {
        method: 'GET',
        timeout: 10000,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
         body: JSON.stringify({
            "this": "",
            "this 2": ""
        }) 
      })
      .then((response) => response.text())
      .then((responseData) => { console.log(responseData); })
      .then((json)=> setData(text(json.data)))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false)); [];
    }, []);

    return (
        <ScrollView style={styles.container}>
            {isLoading ? <ActivityIndicator /> : (

               <Text> {data.text} </Text>

               <FlatList
                 data={data}   
                 renderItem={({ item }) => (
                   <Text>{item.skill}</Text>
                 )}
               />
            )}
        </ScrollView>
    );
};

1 Ответ

1 голос
/ 29 мая 2020

Вы должны проанализировать JSON перед отображением:

Изменить: я заменил response.text() на response.json(), чтобы правильно обработать JSON (например: синтаксический анализ). 

export default App = () => {
    const [isLoading, setLoading] = useState(true);

    const [data, setData] = useState([]);

    useEffect(() => {
      fetch('https://URL', {
        method: 'GET',
        timeout: 10000,
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
         body: JSON.stringify({
            "this": "",
            "this 2": ""
        }) 
      })
      .then((response) => response.json())
      .then((data) => setData(json.data))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false)); [];
    }, []);

    return (
        <ScrollView style={styles.container}>
            {isLoading ? <ActivityIndicator /> : (
               <FlatList
                 data={data}   
                 renderItem={({ item }) => (
                   <Text>{item.skill}</Text>
                 )}
               />
            )}
        </ScrollView>
    );
};
...