Question

我有一个非常基本的React应用程序设置。我收到一个我不明白的错误。这是完整的错误：

Objects are not valid as a React child (found: object with keys {posts}). If you meant to render a collection of children, use an array instead.
    in PostList (at App.js:17)
    in div (at App.js:15)
    in App (at index.js:7)
▶ 25 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import posts from './posts.json'
   6 | 
>  7 | ReactDOM.render(<App posts={posts}/>, document.getElementById('root'));
   8 | 
   9 | 
  10 |

似乎React不喜欢这条线，我不确定为什么。这是app.js文件：

  import React from 'react';
  import PostForm from './postform.js'; 
  import PostList from './postlist'; 

  export default class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
          posts: this.props.posts
      } 
    }

    render() {
      return (
        <div>
          <PostForm />
          <PostList posts={this.state.posts}/>
        </div>
      );
    }
  }

这是抛出错误的文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import posts from './posts.json'

ReactDOM.render(<App posts={posts}/>, document.getElementById('root'));

这是posts.json文件似乎抛出错误：

[
    {"title": "My First Post", "author": "Jack"},
    {"title": "My Second Post", "author": "Will"},
    {"title": "My Third Post", "author": "Rick"}
]

这是PostList：

import React from 'react'; 
import Post from './post'; 

export default class PostList extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            posts: this.props.posts
        } 
    }
    render(){
        const posts = this.state.posts.map((post, index) => {
            <Post {...post} key={index} />
        }); 
        return (
            {posts}
        ); 
    }
}

任何帮助/建议都将不胜感激！

Answer 1

您的map函数不会返回任何内容：

const posts = this.state.posts.map((post, index) => {
            <Post {...post} key={index} />
        });

将其更改为：

const posts = this.state.posts.map((post, index) => {
            return <Post {...post} key={index} />
        });

我不确定你的版本是什么，但是在V16以下，一个组件应该只返回一个根元素。所以您可能需要将其更改为：

   render(){
        const posts = this.state.posts.map((post, index) => {
            return <Post {...post} key={index} />
        }); 
        return (
          <div>
            {posts}
          </div>
        ); 
    }

Answer 2

你是否肯定你的帖子对象是collection？当我有一些花括号错误地包裹collection时，我通常会看到这个错误。 React告诉你它发现了一个带有键{posts}的对象。我猜您从posts.json文件导入时，它实际上是以以下方式进入应用程序：

{
  posts: [
   {"title": "My First Post", "author": "Jack"},
   {"title": "My Second Post", "author": "Will"},
   {"title": "My Third Post", "author": "Rick"}
 ]
}

确保您传递的是posts的值，这是集合。我倾向于将这样的常量存储在constants.js文件中，只存储export，即：

// constants.js
export const posts = [
    {"title": "My First Post", "author": "Jack"},
    {"title": "My Second Post", "author": "Will"},
    {"title": "My Third Post", "author": "Rick"}
]

然后将import此collection放入您的App.js文件中。希望这会帮助你。

对象作为React子项无效 - 令人困惑的错误

2 个答案: