无法在本机反应中呈现来自 API 的数据

Question

i want to render data from API, but when i want to view the data in render can't appear here my code, i got my error the data soal_id is undefined. How to make appear the data with the true way? when i try to show the another data this is same doesn't appear and showing error.

 import React, { Component } from 'react'; import { View, Text } from 'react-native'; // import { cos } from 'react-native-reanimated'; export default class QuizTes extends Component { constructor(props) { super(props); this.state = { soal: [], index:0, }; } getSoal =()=>{ fetch('http://unnamed48.ccug.gunadarma.ac.id:9091/api/user/soal',{ method:'post', headers:{ 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ token:"4266ae6eddc02afa38fa39477c22ab5f", studi:"penalaran umum" }) }).then(res => res.json()).then(getData =>{ // console.log(getData) if(getData){ this.setState({ soal: getData.data }) } }).catch(error =>{ console.log(error) }) } componentDidMount(){ this.getSoal() } nextSoal = ()=>{ this.setState({index:(this.state.index + 1) % this.state.soal.length}) } prevSoal = ()=>{ this.setState({index:(this.state.index - 1) % this.state.soal.length}) } render() { const item = this.state.soal[this.state.index] // var items = JSON.parse(item) // console.log(items) return ( <View> <Text> QuizTes </Text> <Text> {JSON.stringify(item).soal_id}/20 </Text> {/* <Text> {item.soal_pertanyaan} </Text> */} </View> ); } }

Answer 1

Dont use JSON.stringify in your case. In the render method, just make a check on item and then render

Like this

<Text> {item && item.soal_id}/20 </Text>