React：有一个 return 语句但是 "Nothing was returned from render. This usually means a return statement is missing"

Question

我有一个正在尝试渲染的组件。我输入了 return 语句，但仍然显示错误。

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

如有任何帮助，我们将不胜感激！

Answer 1

问题是，当 showTaskDate 是 undefined 时，您不渲染任何东西，您只是 return undefined.

如果没有设置 showTaskDate，您可以将 return 更改为使用条件，return null 不渲染任何内容。

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

React：有一个 return 语句但是 "Nothing was returned from render. This usually means a return statement is missing"

React: Have a return statement but "Nothing was returned from render. This usually means a return statement is missing"

javascript

export

render

reactjs