反應：渲染沒有返回任何內容

Question

我在我的 React 應用程序的一個組件中有一個組件，我在其中 map 通過一個數據並在另一個中渲染它，但我不斷收到此錯誤Error: Data(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. Error: Data(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我的數據組件：

  const Data = () => {
    return (
      transactions &&
      transactions.map((t) => (
        <Block
          from={t.from_account}
          to={t.to_account}
          type={t.type}
          amount={t.amount}
          currency={"HAT"}
          time={convertedDate}
          key={t.transaction_id}
        />
      ))
    );
  };

我試圖在哪里顯示它（在同一個組件中）：

{loading ? <Loader type="ball-scale-ripple-multiple" /> : <Data />}

Block 也是另一個單獨的組件（不在同一個文件中），這絕對沒有意義，我清楚地返回了所需的內容。 這可能是什么原因造成的？ 它是如何固定的？

Answer 1

它看起來像您創建組件的方式，如果沒有傳遞任何轉換，它確實返回未定義，如果事務未定義，您可以通過返回 null 來修復它。

這可以解決問題：

const Data = () => {
  return (
    !transactions ? null :
    transactions.map((t) => (
      <Block
        from={t.from_account}
        to={t.to_account}
        type={t.type}
        amount={t.amount}
        currency={"HAT"}
        time={convertedDate}
        key={t.transaction_id}
      />
    ))
  );
};