javascript - React Native 获取 TypeError : undefined is not an object(evaluating '_this.state.apiData.items.map' )

Question

我是 react-native 的新手。我从 node.js 服务器获得了 json 数据。我检查数据发送过程已经完成。

但是 react-native 一直向我显示错误

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

我有这样的json数据

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"

}
]
}

这是出错的代码

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>
    );

}
}

我想从数组“items”中获取数据。

我试过

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

内部

constructor(props)

但它不起作用。

Answer 1

因为最初在状态中，apiData 是空的。

所以你不能访问apiData.items。这肯定会导致错误。

因此，当您使用它或在您的情况下映射它时，只需将条件放在那里。

像这样，

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