代码之家 › 专栏 › 技术社区 › Subrata Sarkar

嵌入功能组件并从中返回列表时,React应用程序中的呈现错误未返回任何内容

reactjs

Subrata Sarkar · 技术社区 · 6 年前

我有以下组件结构。但是当我管理这个网站的时候 “渲染没有返回任何内容。” 错误。

文件夹:

布局.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;

邮政.jsx

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;

邮政JSX

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(…):没有从render返回任何内容。这通常意味着缺少返回语句。或者,若不呈现任何内容,则返回null。

从 Layout.jsx .

但是,当我移除 <Posts ... /> 错误消失了。

如果我运行 map 直接循环 布局.jsx 而不是嵌入 <Posts /> 功能组件,一切正常-如下所示:

render() {
    return (
      <div className="BlogContainer">
        <div className="teasers">
          {this.state.posts.map(post => {
            return (
              <div className="teaser" key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.body}</p>
              </div>
            );
          })}
          ;
        </div>
        <div className="fullpost">
          <h1>Full Post (Name)</h1>
        </div>
      </div>
    );
  }

我的方法出了什么问题?

1 回复 | 直到 6 年前

Gabriele Petrioli 6 年前

你错过了 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;

或者你可以跳过 返回 但也要去掉包装 {}

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;