反应：渲染没有返回任何内容

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