React Native, получая TypeError: undefined не является объектом (оценка '_this.state.apiData.items.map') - PullRequest
Новая
       7

React Native, получая TypeError: undefined не является объектом (оценка '_this.state.apiData.items.map')

1 голос
/ 22 мая 2019

Я новичок в реакции-родной. Я получил данные json с сервера node.js. Я проверил процесс отправки данных уже завершен.

А вот реакция-родной продолжает показывать мне ошибку

TypeError: undefined не является объектом (оценивается как _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)

внутри

конструктор (реквизит)

но это не работает.

1 Ответ

2 голосов
/ 22 мая 2019

Потому что сначала в состоянии есть пустое apiData.

Таким образом, вы не можете получить доступ к apiData.items. Это наверняка вызовет ошибку.

Так что просто ставьте условие там, когда вы его используете или в вашем случае отображаете его.

Как это, 

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