Reactjs 嵌入功能组件并从中返回列表时，React应用程序中的render error未返回任何内容

我有以下组件结构。但是当我运行站点时，我得到了“渲染没有返回任何内容。”错误

档案：

Layout.jsx

import React, { Component } from "react";
import "./Layout.css";
import axios from "axios";
import Posts from "../../components/Posts/Posts";

class Layout extends Component {
  /**
   * Set a state
   */
  state = {
    posts: []
  };

  /**
   * Import data
   */
  componentDidMount() {
    axios.get("http://jsonplaceholder.typicode.com/posts").then(response => {
      this.setState({ posts: response.data });
    });
  }

  /**
   * Render
   */
  render() {
    return (
      <div className="BlogContainer">
        <Posts postList={this.state.posts} />
        <div className="fullpost">
          <h1>Full Post (Name)</h1>
        </div>
      </div>
    );
  }
}

export default Layout;

import React from "react";
import Post from "./Post/Post";

const posts = props => {
  props.postList.map(post => {
    return (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    );
  });
};

export default posts;

import React from "react";

const post = props => {
  return (
    <div className="teaser" key={props.key}>
      <h3>{props.title}</h3>
      <p>{props.content}</p>
    </div>
  );
};

export default post;

---

我的方法出了什么问题？

您的posts组件中缺少了

return

Posts.jsx

import React from "react";
import Post from "./Post/Post";

const posts = props => {
  return props.postList.map(post => {
    return (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    );
  });
};

export default posts;

---

您的posts组件中缺少

返回

Posts.jsx

import React from "react";
import Post from "./Post/Post";

const posts = props => {
  return props.postList.map(post => {
    return (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    );
  });
};

export default posts;

---

你的

Posts.jsx

应该

props.postList.map（post=>{

.BTW如果你在那里删除外部

{…}

它会工作，因为隐式返回。但是因为

{…}

你必须在那里放置

return

明确地感谢你的快速回复！现在一切正常：）很好。由于某种原因，我丢失了

return props.postList.map（post=>{

）的

return

部分。所以很好，你终于修复了你的

Posts.jsx

应该

props.postList.map（post=>{/code>。顺便说一句，如果你删除了外部
{…}
，它会工作，因为隐式返回。但是由于
{…}
你必须在那里放置
return
明确感谢你的快速回复！现在一切正常：）很好。出于某种原因，我丢失了
return props.postList.map（post=>{
。很高兴你终于解决了这个问题，谢谢你的快速回复！我使用了第二种方法，因为我没有在组件内部进行任何JS编码，只是返回JSX。现在一切正常！谢谢你的快速回复！我使用了第二种方法，因为我没有在组件内部进行任何JS编码，所以更符合逻辑e组件，只是返回JSX。现在一切正常！
import React from "react";
import Post from "./Post/Post";

const posts = props => props.postList.map(post => (
      <div className="teasers">
        <h1>Recent Posts</h1>
        <Post title={post.title} content={post.body} key={post.id} />
      </div>
    ));

export default posts;