React：有一個返回語句，但“沒有從渲染中返回任何東西。這通常意味着缺少一個返回語句”

Question

我有一個正在嘗試渲染的組件。 我放了一個返回語句，但我仍然顯示錯誤。

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你不渲染任何東西，你只是返回undefined 。

如果沒有設置showTaskDate ，您可以更改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
  );
};