React JS 无法读取未定义的属性“地图”

Question

I want to get data from api, and set it in a state, and use it in map to iterate

    const result = await API.getSearch(data);

    if(result.status === 200){
        this.setState({data: result.data, loading: false })
    }

    const result = await API.getSearch(data); // got data successfully

Then:

this.state.data && this.state.data.length > 0 && this.state.data.data.map(function(value, i){

I know this kind of error mean, map didn't get any data, So I used condition, first I check if state return data, then check if data has length, but still get this error. any solution ?

Answer 1

I guess instead of this

this.state.data.data.map(function(value, i){

It should be only one time data

this.state.data.map(function(value, i){

Answer 2

Look like you haven't initialized data . So, During the first rendering, it is undefined . On undefined , map is not exists.Causing this issue.

Declare and define data like this below

this.state = {
    data: []
}

OR

constructor(props) {
    this.state = {
        data: []
    }
}

Answer 3

Use destructure to have default values and make sure the inner data is array

 const { data : { data = [] } = {} } = { data: { data: ['foo', 'bar']} } ; console.log(data.map(x => x + "--").join());