时间戳

首页 > 解决方案 > 错误：对象作为 React 子对象无效，但我的数据是对象数组？

arrays - 错误：对象作为 React 子对象无效，但我的数据是对象数组？

问题描述

免责声明：我检查了其他线程，例如这个线程，可以看到我的问题在技术上并不相同：Promise Error: Objects are not valid as a React child

我已经发送了我的 api 请求：

async getGenreList(){
    const genresResults = await getGenres()
     return genresResults
  }

  componentDidMount() {
    this.getGenreList().then((response) => {
      this.setState({ genreOptions: response})
    });
    
  }

这是响应：每个对象都包含一个 id 和 name 键

(19) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

在 stategenreOptions 中期待一个数组

  this.state = {
      totalCount: 0,
      genreOptions: [],
    };

我传递genreOptions给MovieList组件，然后在该组件上映射genreOptions

<MovieList movies={results || []} genres={genreOptions || []} />

在 MovieList 组件内部

 {genres.map((genre)=>{
      return <div>{genre.id} {genre.name}</div>
 })}

我正在映射从我的 Promise 返回的对象数组，所以我不确定为什么会出现错误。Error: Objects are not valid as a React child (found: object with keys {id, name}). If you meant to render a collection of children, use an array instead.

如果你发现它，请告诉我。

提前致谢。

更新以显示其中一个对象的外观

0:
id: 28
name: "Action"
__proto__: Object

更新以显示完整的 MOVIELIST COMPONENET

export default class MovieList extends React.Component {
  render() {
    const { movies, genres } = this.props;

    return (
      <MoviesWrapper>
        {movies.map((movie) => {
          return <div>{movie.title}</div>;
        })}
          {genres.map((genre)=>{
              return <div>{genre.id} {genre.name}</div>
          })}
      </MoviesWrapper>
    );
  }
}

*** 我想出的一个解决方案，但不确定我应该在更新状态时使用 .map ***

 this.getGenreList().then((response) => {
      this.setState({ genreOptions: response.map((genre) => genre.name)})
    });

这将返回一个名称数组

标签： arraysreactjsobjectpromise

解决方案

问题是我在我的一个组件中返回并在 JSX 括号内反对，该组件也包含movieGenres

<GenreFilterCont marginTop>
 {filtersShown && (
   <ExpandableFiltersUl>
 {this.props.movieGenres.map((genre) => {
 return (
     <ExpandableFiltersLi>
       <Checkbox />
         {genre} //here
     </ExpandableFiltersLi>
       );
      })}
    </ExpandableFiltersUl>
 )}
 </GenreFilterCont>

而不是


<GenreFilterCont marginTop>
              {filtersShown && (
                  <ExpandableFiltersUl>
                      {this.props.movieGenres.map((genre, index) => {
                          return (
                              <ExpandableFiltersLi key={index}>
                                  <Checkbox />
                                  {genre.name} //here is correct and not an object
                              </ExpandableFiltersLi>
                          );
                      })}
                  </ExpandableFiltersUl>
              )}
          </GenreFilterCont>

推荐阅读