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

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

我的React应用程序中出现以下错误

TasksColumn（…）：渲染未返回任何内容。这通常表示缺少return语句。或者，要不渲染任何内容，请返回>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"));

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

---

最终，我需要

Dashboard.js

中的

TasksColumns

来渲染

TaskRecord

中的每个

taskData

，您正在为react DOM使用的渲染名称与渲染方法冲突

从“react dom”导入react dom

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

ReactDOM.render(
, 
document.querySelector（“根”）
);

在您的

任务列

组件中，当前您仅在

挂载

为

真时返回内容。但是在
componentDidMount（）
中的逻辑之前，mounted不会设置为
true
<代码>组件didmount（）

仅在第一次渲染后触发。您仍然需要

返回
一些内容，以便在装载时初始呈现仍然
为false
：

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>
         }
     }
}

导出默认类TasksColumn扩展组件{
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：false，
错,，
数据：[]
};
}
componentDidMount（）{
这是我的国家({
孤岛加载：是的，
是的
});
}
render（）{
const{tasks}=this.props；
let mounted=this.state.mounted；
if（mounted==true）{
报税表（
{tasks.map（（task，i）=>
)}
);  
}否则{
回纬
}
}
}
您应该将
taskData
作为道具传递到
taskColumn
您调用它的位置，即在
仪表板中。这是更好的做法，因为这样，“调用者”组件就可以控制其子组件。以这种方式进行设置更为清晰，可读性更强。React一直都是这样的——都是关于模块化、分解和保持数据流干净。请阅读此处了解更多：

你不应该需要

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

您的问题是
TaskColumn
类，特别是
render
方法：

class TaskColumn扩展了React.Component{
render（）{
const mounted=this.state.mounted
//不要这样做
if（mounted==true）{
返回（…）
}
}
}

根据
React.js
文档：

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

由于
render
函数仅在
mounted
为
true
时返回
JSX
，因此本质上，当
mounted
为
false
时返回
未定义的
。当您的组件第一次装载时（在触发
componentDidMount
之前），会发生这种情况，这是错误的，因为
render
函数必须返回以下任何一项：


反应元素
数组和片段
入口
字符串和数字
布尔还是空

请查看此处以了解更多：

如果在满足特定条件之前不想渲染任何内容，则应返回
null
：

class TaskColumn扩展了React.Component{
render（）{
const{tasks}=this.props
const isLoading=this.state.isLoading
如果（孤岛加载）{
回装
}
如果（！isLoading&&tasks&&tasks.length>0）{
返回(
{tasks.map（…）}
)
}
//否则，如果不希望，则返回null
//在数据/任务可用之前显示任何内容
返回空
}
}
Hi R.Antao，请查看下面我的解决方案，并让我知道这是否有效。添加else{return null}（或woof）有效！谢谢克里斯。@R.Antao欢迎你的朋友！请考虑将此标记为解决方案：
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: '',
    },
  ],
};