Question

这是我的代码。当我尝试构建与当前值一样多的组件文章时。我收到错误说明错误：对象作为React子对象无效（找到：带有键{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的键的对象，并以Article s的列表作为值。

等效于此：

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

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

1 个答案: