Arrays 错误：对象作为React子对象无效（找到：具有键{articles}的对象）

这是我的代码。当我尝试构建组件文章时，尽可能多地使用当前的值。我在声明错误时出错：对象作为React子对象无效（找到：具有键{articles}的对象）。如果要呈现子对象集合，请改用数组

即使项目的值是对象数组。映射时会引发此错误。我是否应该导入此组件中的任何内容，或者此代码中是否存在任何错误。这是我在控制台中打印项目值时的图像--->

从“axios”导入axios；
从“./Article”导入项目
类文章扩展了组件{
状态={
第[…]条，
}
组件安装（）{
axios.get（）https://jsonplaceholder.typicode.com/posts')
。然后（响应=>{
控制台日志（响应）；
this.setState（{articles:response.data}）；
});
}
渲染（）{
让articles=this.state.articles.map（article=>{
返回；
});
返回(
{条款}
);
};
};
出口违约物品；

您混淆了JavaScript对象和JSX花括号

当您返回

{articles}

时，实际上是在返回一个对象，该对象有一个名为

articles

的键，其值为

Article

的列表

这相当于：

render () {
  const list = this.state.articles.map(article => {
    return <Article />;
  });
  return (
    {articles: list}
  );
};

如果在JSX中使用了

articles

，则在

articles

周围使用大括号是正确的：

render () {
  const articles = this.state.articles.map(article => {
    return <Article />;
  });
  return (
    <>{articles}</>
  );
};

render（）{
const articles=this.state.articles.map（article=>{
返回；
});
返回(
{条款}
);
};

您可以尝试

{articles.length&&articles}

非常感谢，我3天前刚开始使用react，被它阻止了4个小时，希望尽快解决。这确实帮了我很多。再次感谢您。。

render () {
  const articles = this.state.articles.map(article => {
    return <Article />;
  });
  return articles;
};

render () {
  const articles = this.state.articles.map(article => {
    return <Article />;
  });
  return (
    <>{articles}</>
  );
};