Question

我是本机新手。我从node.js服务器获取了json数据。我检查数据发送过程已经完成。

但是本机反应不断向我显示错误

TypeError：未定义不是对象（正在评估'_this.state.apiData.items.map'）

我有这样的json数据

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

}
}

这是出错的代码

style="width:100%; height:100%; user-select: none; -webkit-user-select: none;"

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

我尝试放

this.togglePop = this.togglePop.bind（this）

在

内部

构造函数（道具）

但这没用。

Answer 1

因为最初处于该状态，所以空apiData。

因此您无法访问apiData.items。这肯定会导致错误。

因此，只要在使用条件或映射条件时在其中放置条件即可。

喜欢这个

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

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

1 个答案: