Question

注意：我已经浏览过类似的问题；提供的解决方案不能解决我的问题。

我的React应用出现以下错误

TasksColumn（...）：渲染未返回任何内容。这通常意味着缺少返回语句。或者，不渲染任何内容，请返回> null。

以下是相关代码：

TasksColumn.js

import React, { Component } from "react";
import { render } from "react-dom";
import { Col, Row } from "react-bootstrap";

const taskData = [
  {
    title: "Preliminary Report",
    course: "Capstone Design",
    type: "Report",
    deadline: "2019-10-04"
  },
  {
    title: "title2",
    course: "course2",
    type: "type2",
    deadline: "date2"
  },
  {
    title: "title3",
    course: "course3",
    type: "type3",
    deadline: "deadline3"
  }
];

const TaskRecord = ({ title, course, type, deadline }) => {
  return (
    <Row class="task-record">
      <Col>
        <div class="task-record-title">
          <h5>{title}</h5>
        </div>
        <div class="task-record-course">
          <h6>{course}</h6>
        </div>
      </Col>
      <Col>
        <div class="task-record-type">
          <p>{type}</p>
        </div>
        <div class="task-record-deadline">
          <p>{deadline}</p>
        </div>
      </Col>
    </Row>
  );
};

export default class TasksColumn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      mounted: false,
      data: []
    };
  }
  componentDidMount() {
    this.setState({
      isLoading: true,
      mounted: true
    });
  }
  render() {
    const { tasks } = this.props;
    let mounted = this.state.mounted;

    if (mounted == true) {
      return (
        <Col id="tasks-column">
          {tasks.map((task, i) => (
            <TaskRecord
              key={i}
              title={task.title}
              course={task.course}
              type={task.type}
              deadline={task.deadline}
            />
          ))}
        </Col>
      );
    }
  }
}

render(<TasksColumn tasks={taskData} />, document.querySelector("#root"));

Dashboard.js

import React from "react";
import { Container, Row, Col } from "reactstrap";
import TasksColumn from "../../molecules/TasksColumn";

export default function Dashboard(props) {
  return (
    <React.Fragment>
      <Container>
        <Row>
          <TasksColumn />
        </Row>
      </Container>
    </React.Fragment>
  );
}

最终，我需要TasksColumns中的Dashboard.js来渲染taskData中的每个TaskRecord。

Answer 1

在TaskColumn组件中，当前您仅在mounted为true时返回某些内容。但是直到您在true中的逻辑之前，mount的设置都不会设置为componentDidMount()。 componentDidMount()仅在第一个渲染后触发。挂载仍为return时，您仍需要false进行 initial 渲染：

export default class TasksColumn extends Component {
     constructor(props) {
          super(props);
          this.state = {
               isLoading: false,
           mounted: false,
           data: []
          };
     }
     componentDidMount() {
          this.setState({
           isLoading: true,
        mounted: true
          });
     }
     render() {
          const { tasks } = this.props;
      let mounted = this.state.mounted;

          if (mounted == true) {
           return ( 
                <Col id="tasks-column">
                 {tasks.map((task, i) => 
                  <TaskRecord 
                       key={i}
                   title={task.title} 
                       course={task.course} 
                   type={task.type}
                   deadline={task.deadline}
                  />
                 )}
             </Col>
           );  
         } else {
            return <div>woof</div>
         }
     }
}

Answer 2

您的问题是TaskColumn类，尤其是render方法：

class TaskColumn extends React.Component {
  render() {
    const mounted = this.state.mounted

    // DON'T DO THIS
    if (mounted == true) {
      return (...)
    }
  }
}

根据React.js文档：

componentDidMount（）在安装组件（插入树中）后立即被调用

由于您的render函数仅在JSX为mounted时返回true，因此实际上，您在undefined为{{ 1}}。当您的组件第一次安装时（在mounted被触发之前），这种情况就会发生，并且是错误的，因为false函数必须返回以下任何内容：

反应元素
数组和片段
门户
字符串和数字
布尔值或null

看看这里以了解更多信息：reactjs.org/docs/react-component.html#render。

如果您不希望在满足特定条件之前渲染任何内容，则应该只返回componentDidMount：

render

Answer 3

您正在使用渲染名称来响应与渲染方法冲突的DOM。

从“ react-dom”导入ReactDOM；

ReactDOM.render (
    <TasksColumn tasks={taskData}/>, 
    document.querySelector("#root")
);

Answer 4

您应该将taskData作为道具传递到您称之为taskColumn的地方，即Dashboard中。这是更好的做法，因为通过这种方式，“调用者”组件控制其子组件。以这种方式设置它更干净，更易读。 React一直都是这样-关于模块化和分解问题并保持数据流干净。在此处阅读更多内容：https://reactjs.org/docs/thinking-in-react.html。

您不需要

render (
    <TasksColumn tasks={taskData}/>, 
    document.querySelector("#root")
)

在组件外部，因为您现在已经将所有这些组件设置为它们的个别渲染方法。

其他说明：到目前为止，对于您的用例，您可能不需要两个状态变量来进行“装载” /“装载”。只需使用PropTypes设置默认值（或设置为必填）taskData。示例：

TasksColumn.propTypes = {
  taskData: PropTypes.arrayOf(PropTypes.shape({
    title: PropTypes.string,
    course: PropTypes.string,
    type: PropTypes.string,
    deadline: PropTypes.string,
  }))
};

TasksColumn.defaultProps = {
  taskData: [
    {
      title: '',
      course: '',
      type: '',
      deadline: '',
    },
  ],
};

反应错误：渲染器未返回任何内容

4 个答案: