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

Posted 2023-02-22

【中文标题】错误：对象作为 React 子对象无效，但我的数据是对象数组？

【英文标题】：Error: Objects are not valid as a React child, but my data is an array of objects?

【发布时间】：2021-04-13 16:25:46

【问题描述】：

免责声明：我检查了其他线程，例如这个线程，可以看到我的问题在技术上并不相同：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))
    );

这会返回一个名称数组

【问题讨论】：

嗨，安吉拉，您能否在数组中包含一个对象的示例，以便我们准确查看您要渲染的数据？

实际上我可能已经发现了——你能给我们展示完整的 MovieList 组件吗？数组映射是否在任何 jsx 中？如果不是，那么您不应该将其包裹在花括号中。这会导致错误

嗨，安吉拉，这样设置状态很好 - 实际上你是在将状态设置为 map 函数的结果。您可以通过将 map 函数的结果分配给一个变量然后使用该变量来更新状态来使其更明确，但最终还是一样的，只是更易于阅读。如果这对你有用，那就太好了，但它不能解释为什么它以前不能工作 - 你得到的错误意味着它试图将一个对象呈现为 div 的内容，而不是那个上的数字/字符串属性object - 就像你写了 genre

嗨，对不起，我删除了我的答案——我所说的渲染孩子是不正确的——但你对我的回答的评论促使我认为这可能是因为 MoviesWrapper 组件没有返回任何 jsx，但是只是让孩子们回来。在这种情况下，通过将 2 个数组作为子数组传递可能会导致错误，并会解释为什么将其包装在片段中对您有用。

在解决了原始错误后，您是否尝试过此操作？这应该是完全可能的，并且是常见的做法。请记住，您需要考虑如何实现 map 函数——如果你只是将它作为一个简单的函数放在 MovieList 组件中，那么它将在每次渲染时运行——这可能不是一个大问题，具体取决于您的应用程序的大小，但如果性能是一个问题，您应该考虑诸如 memoization 之类的事情

【参考方案1】：

问题是我在我的一个组件中返回并在 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>