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

Question

这是我的代码。当我尝试尽可能多地构建组件文章时。我收到错误声明 Error: Objects are not valid as a React child (found: object with keys {articles})。如果您打算渲染一组子项，请改用数组。

即使文章的值是对象数组。映射时会抛出此错误。我应该在此组件中导入任何内容，否则此代码中是否有任何错误。这是我在控制台中打印文章值时的图像--->enter image description here

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;

Answer 1

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

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

相当于这样：

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}</>
  );
};