Компонент «loop» с React JS

Question

Я изучаю библиотеку React JS, и я хочу создать «цикл» компонента, возвращая значения массива из json-файла. Вот мой файл JSON:

{ 
    "data": { 
    "children": [{ 
     "data": { 
     "score": 4 
     }, 
     { 
     "data": { 
      "score": 2 
     } 
     } 
    }] 
    } 
} 

Моя реагировать компонент:

var ImagesList = React.createClass({ 
    render: function() { 
     var imagesNodes = this.props.data.map(function (image){ 
     return (
      <div className="card"> 
       <p>{image.score} </p> 
      </div> 
     ); 
     }); 

     return (
     <div className="images"> 
      {imagesNodes} 
     </div> 
    ); 
    } 
    }); 

var ImageBox = React.createClass({ 
    getInitialState: function(){ 
     return { 
     data: {children:[]} 
     }; 
    }, 

    getImages: function(){ 
     $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(data){ 
      this.setState({data: data}); 
     }.bind(this), 
     error: function(xhr, status, err){ 
      console.error(url, status, err.toString()); 
     }.bind(this) 
     }); 
    }, 

    componentWillMount: function(){ 
     this.getImages(); 
    }, 

    render: function() { 
    return (
     <div className="list-images"> 
      {<ImagesList data={this.state.data.children}/>} 
     </div> 
    ); 
    } 
}); 

    React.render(
    <ImageBox url="myfile.json" />, 
    document.getElementById('test') 
); 

Когда я запускаю код, возвращая эту ошибку:

Uncaught TypeError: Cannot read property 'map' of undefined.

Я не знаю, как исправить это.

Answer 1

Входные данные JSON недействительны. Утвержденный его JSONParser

ImageList компонент ожидает children JSON массива внутри data объекта. Так что, если AJAX вызов возвращает следующий JSON, компонент будет иметь возможность визуализации, что данные

{ 
    "children": [ 
    { 
     "score": 4 
    }, 
    { 
     "score": 2 
    } 
    ] 
}; 

Пожалуйста, обратите внимание, что this.setState({data: data}); уже имеет data переменную. Таким образом, ответ не должен снова задаваться data иначе он станет data.data.children. Поэтому код бросает Uncaught TypeError: Cannot read property 'map' of undefined.

Для дальнейшего чтения после завершения ReactJS исследования, я бы рекомендовал проверить Flux Architecture, который рекомендуется способ реализации ReactJS приложений

Answer 2

Lets отладки кода. в функции обратного вызова ajax в вашем коде. вы получаете данные json data и вы устанавливаете данные состояния с данными возврата. Так this.state.data будет:

{ 
    "data": { 
    "children": [{ 
     "data": { 
     "score": 4 
     }, 
     { 
     "data": { 
      "score": 2 
     } 
     } 
    }] 
    } 
} 

И в методе визуализации вы пытаетесь вставить реквизита в ImagesList из Imagebox в

data = { this.state.data.children } 

но this.state.data.children не определен. в файле this.state.data нет ключевых названных дочерних элементов. Вы можете сделать:

{<ImagesList data={this.state.data.data.children}/>} 

NB. Не забудьте проверить значение JSON, как описано выше, и проанализировать его на Json.

getImages: function(){ 
    $.ajax({ 
    url: this.props.url, 
    dataType: 'json', 
    success: function(data){ 
     this.setState({data: JSON.parse(data)}); 
    }.bind(this), 
    error: function(xhr, status, err){ 
     console.error(url, status, err.toString()); 
    }.bind(this) 
    }); 
},