Uncaught TypeError: this.props.data.map is not a function (using superagent)

Question

我收到 'props.data.map is not a function error'。我在 ResultList 中也有 console.log 'this.props.data' 但不知何故它仍然没有映射。我还在 google 和 Whosebug 中尝试了所有相关的 links。

请指教。任何帮助将不胜感激！！谢谢你们:)

这里的link显示了响应的截图： 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) });

Uncaught TypeError: this.props.data.map is not a function (using superagent)

Uncaught TypeError: this.props.data.map is not a function (using superagent)

javascript

superagent

reactjs