Question

使命：

这部分是为了充分说明我正在尝试做的事情，以及我正在使用的代码。

我正在尝试使用ajax调用设置SearchContainer组件的状态。返回的数据如下所示：

[  
   {  
      "id":903,
      "name":"Adrian College",
      "url":"https://en.wikipedia.org/wiki/Adrian_College",
      "nickname":"Bulldogs",
      "city":"Adrian",
      "state":"Michigan",
      "conference":"Michigan Intercollegiate Athletic Association",
      "athletics_url":null,
      "enrollment":20000,
      "selectivity":"High",
      "slug":null,
      "college_sports":[  
         {  
            "sport":{  
               "id":71,
               "name":"Softball",
               "gender":"Female",
               "division":"Division III"
            }
         },
         {  
            "sport":{  
               "id":68,
               "name":"Volleyball",
               "gender":"Female",
               "division":"Division III"
            }
         }
      ]
   }
]

我正在使用以下ajax（在SearchContainer组件中）获取此信息，然后我尝试使用返回的数据设置filteredColleges的状态（在上面引用）：

$.ajax({
    url: `/api/search/colleges.json/?query=${query}`,
    method: 'GET',
    success: (data) => {
        this.setState({ filteredColleges: data });
    }
});

我将更新我的SearchResults组件，如下所示：

<SearchResults filteredColleges={ this.state.filteredColleges }/>

在SearchResults内，我呈现以下内容：

const colleges = this.props.filteredColleges.map( function(college) {
    return <College college={college} key={college.id}/>
});

在每个College组件中，我希望能够引用属于该大学的体育列表。

我的问题：

当我尝试在filteredColleges组件中设置SearchContainer的状态...

this.setState({ filteredColleges: data });

我收到以下错误：

Uncaught Error: Objects are not valid as a React child (found: object with keys {sport}).

我尝试过多种不同方式解析数据，但没有运气。我很确定这意味着我的sport数组中不能有data个对象？我正确地解释了这个错误吗？有没有办法解决这个问题？

编辑＃1：分享我的学院组件

import React from 'react';

export default class College extends React.Component{

    constructor(props) {
        super(props);
    }

    render() {
        const { name, nickname, conference, url, enrollment, selectivity, city, state } = this.props;

        return (
            <tr>
                <td>{ this.props.college.name }</td>
                <td>{ this.props.college.nickname }</td>
                <td>{ this.props.college.conference }</td>
                <td><a href={ this.props.college.url } target="blank">{this.props.college.url}</a></td>
                <td>{ this.props.college.enrollment }</td>
                <td>{ this.props.college.selectivity }</td>
                <td>{ this.props.college.city }</td>
                <td>{ this.props.college.state }</td>
                <td>{ this.props.college.college_sports }</td>
            </tr>
        )
    }
}

Answer 1

我认为问题是你的College组件直接从college_sports数组输出对象，如：

const college_sports = this.state.college.college_sports
<ul>
  { college_sports.map(sport=> <li>{sport}</li>) }
</ul>

但是你不能输出整个对象，就像错误说的那样。尝试类似：

const college_sports = this.state.college.college_sports
<ul>
  { college_sports.map(sport=> <li>{sport.name}</li>) }
</ul>

Answer 2

这里发生的是在数组中有多个具有相同名称的对象。您可以更改您的api，为您提供一个没有对象名称或此部分的唯一对象名称的数组。

React：使用对象数组设置状态

2 个答案: