React Native得到TypeError：undefined不是一个对象（正在评估'_this.state.apiData.items.map'）

Question

I'm new at react-native. I got json data from node.js server. I checked data sending process is already done.

But react-native keep showing me the error

TypeError: undefined is not an object(evaluating '_this.state.apiData.items.map')

I've got json data like this

json data
{
"lastBuildDate": "Wed, 22 May 2019 13:13:34 +0900",
"total": 1,
"start": 1,
"display": 1,
"items": [
{
"title": "Booktitle",
"link": "http://book.naver.com/bookdb/book_detail.php?bid=14027973",
"image": "https://bookthumb-phinf.pstatic.net/cover/140/279/14027973.jpg?type=m1&udate=20190427",
"author": "Authorname",
"price": "15800",
"discount": "14220",
"publisher": "Publishername",
"pubdate": "20181010",
"isbn": "8965746663 <b>9788965746669</b>",
"description": "discriptions"

}
]
}

and this is the code which got error

export default class Isbnsearch extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        currentDate: new Date(),
        markedDate: moment(new Date()).format(),
        isPopVisible: false,
        apiData: [],
    }
    this.ISBN = null;
    this.book_name = null;
    this.img_src = null;
    this.author = null;
    this.publisher = null;
    this.public_date = null;
    this.more_url = null;
    this.read_rate = null;
    this.read_date = null;
    this.category = null;
    this.best = null;
}

togglePop = () => {
    this.setState({ isPopVisible: !this.state.isPopVisible });
    fetch('http://220.149.242.12:10001/search/book/' + (this.ISBN), {
        method: 'GET'
    }).then((responseData) => {
        return responseData.json();
    }).then((jsonData) => {
        console.log(jsonData);
        this.setState({ apiData: jsonData })
        console.log(this.state.apiData)
    }).done();
    this.ISBN = null;
    this.book_name = null;
    this.img_src = null;
    this.author = null;
    this.publisher = null;
    this.public_date = null;
    this.more_url = null;
    this.read_rate = null;
    this.read_date = null;
    this.category = null;
    this.best = null;
}

render() {
    const data = this.state.apiData;
    const today = this.state.currentDate;
    var dataDisplay = data.items.map(function(item) {
        return (
            <View style={styles.popfirst}>
                <View style={styles.popsecond}>
                    <View style={styles.popthird}>
                        <View style={{ paddingTop: 30, }}>
                            <Text style={{ color: '#52C8B2', fontSize: 20, }}>book information check</Text>
                        </View>
                        <View style={{ paddingTop: 20, }}>
                            <Image style={{ width: 150, resizeMode: 'contain', }}
                                source={{ uri: item.image }}>
                            </Image>
                        </View>
                        <View style={{ paddingTop: 10, }}>
                            <Text style={{ fontSize: 18, }}>{item.title}</Text>
                        </View>
                        <View style={{ paddingTop: 10, }}>
                            <Text style={{ color: '#D7D7D7' }}>{item.author} | {item.publisher} | {today}</Text>
                        </View>
                        <View style={styles.popbtn}>
                            <View style={{ width: 10, }}></View>
                            <View style={styles.popbtnleft}>
                                <SwitchButton
                                    onValueChange={(val) =>     this.setState({ activeSwitch: val })}
                                    text1='reading'
                                    text2='done'
                                    switchWidth={120}
                                    switchHeight={30}
                                    switchdirection='ltr'
                                    switchBorderRadius={0}
                                    switchSpeedChange={500}
                                    switchBorderColor='#52C8B2'
                                    switchBackgroundColor='#F2F2F2'
                                    btnBorderColor='#52C8B2'
                                    btnBackgroundColor='#52C8B2'
                                    fontcolor='#333'
                                    activeFontColor='#FFF'
                                />
                            </View>
                        </View>
                        <View style={styles.popbtnbig}>
                            <TouchableOpacity style={styles.bigbtn} onPress={this.togglePop}><Text style={{ fontSize: 16, color: '#FFF' }}>cancle</Text></TouchableOpacity>
                            <TouchableOpacity style={styles.bigbtn} onPress={this.togglePop}><Text style={{ fontSize: 16, color: '#FFF' }}>submit</Text></TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        )
    });
    return (
        <View style={cstyle.greycontainer}>
            <View style={styles.firstbox}>
                <Text style={{ color: '#FFF', fontSize: 20 }}>Input the ISBN code</Text>
            </View>
            <View style={styles.secondbox}>
                <TextInput style={styles.input}
                    placeholder="Enter ISBN"
                    onChangeText={(text) => { this.ISBN = text }}
                    value={this.ISBN}
                />
                <TouchableOpacity style={styles.searchbtn} onPress={this.togglePop}>
                    <IonIcon name="ios-search" size={30} color='#FFF' />
                </TouchableOpacity>
            </View>
            <View style={styles.firstbox}>
                <TouchableOpacity style={styles.greenbtn}>
                    <Text style={{ color: '#FFF', fontSize: 20 }}>cancle</Text>
                </TouchableOpacity>
            </View>
            <Modal isVisible={this.state.isPopVisible}>
                {dataDisplay}
            </Modal>
        </View>
    );

}
}

I want to get data from array "items".

I tried putting

this.togglePop = this.togglePop.bind(this)

inside of

constructor(props)

but it dosen't work.

Answer 1

Because at first in the state, there is empty apiData .

So you can not access apiData.items . It will cause an error for sure.

So just put condition there when you're using it or in your case mapping it.

Like this,

var dataDisplay = null;
if(data && data.items){
  dataDisplay = data.items.map(function(item) {
  ...
}