Uncaught TypeError: this.props.data.map не является функцией (с использованием суперагента)

Question

Я получаю «props.data.map не является функцией ошибки». У меня также есть console.log 'this.props.data' в ResultList, но каким-то образом он пока не отображается. Я также пробовал все связанные ссылки в google и stackoverflow.

Просьба сообщить. Любая помощь будет оценена!! Спасибо, ребята :)

Ссылка здесь показывает скриншот ответа: image

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

    componentDidMount: function() { 
    // loading results from server for initialization 
    this.loadResultsFromServer(); 
    }, 

    loadResultsFromServer: function() { 
    superagent 
    .get('http://localhost:5000/analyzer') 
    .end(function(err, res){ 
     if (res) { 
     console.log(res); 
     this.setState({data: res.text}); 
     } else { 
     console.log("error loading results from server: ", err); 
     } 
    }.bind(this)); 
    }, 

    render: function() { 
    return (
     <div> 
     <ResultList data={this.state.data} /> 
     </div> 
    ); 
    } 
}); 

var ResultList = React.createClass({ 
    render: function() { 
     var resultNodes = this.props.data.map(function (result) { 
     return (
      <Result name={result.Name}> 
      {result.Score} 
      </Result> 
     ); 
     }); 

     return (
     <div> 
      {resultNodes} 
     </div> 
    ); 
    } 
}); 

Answer 1

Похоже, ваш res.text является строкой, а не массив. Это означает, что у него не будет функции .map. Если это ответ, возвращаемый вашим API, вам нужно будет вызвать JSON.parse при настройке состояния, то есть:

this.setState({ data: JSON.parse(res.text) });