时间戳

首页 > 解决方案 > 错误：对象作为 React 子对象无效（找到：带有键 {articles} 的对象）

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

问题描述

这是我的代码。当我尝试尽可能多地构建组件文章时。我收到错误说明错误：对象作为 React 子项无效（找到：带有键 {articles} 的对象）。如果您打算渲染一组子项，请改用数组。

尽管文章中的值是对象数组。映射时会抛出此错误。我应该在此组件中导入任何内容，否则此代码中是否有任何错误。这是我在控制台中打印文章值时的图像--- >在此处输入图像描述

import axios from 'axios';
import Article from './Article'

class Articles extends Component {
    state = {
      articles: [],
    }

  componentDidMount () {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response);
          this.setState({articles: response.data});
      });
  }
  render () {
    let articles = this.state.articles.map(article => {
      return <Article />;
    });
    return (
        {articles}
    );
  };
};

export default Articles;

标签： arraysreactjsobjecterror-handlingstate

解决方案

您将 JavaScript 对象花括号与 JSX 花括号混淆了。

当您返回时{ articles }，您实际上是在返回一个对象，该对象具有一个名为 的键articles，其中 s 的列表Article作为一个值。

这相当于：

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

您只需要返回articles：

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

如果在 JSX 中使用，则使用花括号articles是正确的：articles

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

推荐阅读