首页 > 解决方案 > 反应:有一个返回语句,但“没有从渲染返回。这通常意味着缺少返回语句”

问题描述

我有一个我目前正在尝试渲染的组件。我放了一个返回语句,但我仍然显示错误。

import React, { useState } from 'react';
import moment from 'moment';
import {FaSpaceShuttle} from 'react-icons/fa';

export const TaskDate = ({ setTaskDate, showTaskDate, setShowTaskDate }) => {

  return (
  showTaskDate && (
    <div className="task-date" data-testid="task-date-overlay">
      <ul className="task-date__list">
        <li>
          <div
            onClick={() => {
              setShowTaskDate(false);
              setTaskDate(moment().format('DD/MM/YYYY'));
            }}

          >
            <span>
              <FaSpaceShuttle />
            </span>
            <span>Today</span>
          </div>
        </li>
       
      </ul>
    </div>
    )
  );
};

任何帮助,将不胜感激!

标签: javascriptreactjsexportrender

解决方案


问题是showTaskDateundefined什么时候不渲染任何东西,你只需返回undefined.

如果没有设置,您可以更改return使用条件并返回不呈现任何内容。nullshowTaskDate

export const TaskDate = ({ setTaskDate, showTaskDate, setShowTaskDate }) => {
  return (
    showTaskDate ? (
      <div className="task-date" data-testid="task-date-overlay">
        <ul className="task-date__list">
         ...
        </ul>
      </div>
    ) : null
  );
};

推荐阅读