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

【问题标题】：React: Nothing was returned from render反应：渲染没有返回任何内容
【发布时间】：2021-03-13 06:37:18
【问题描述】：

我的 React 应用程序的组件中有一个组件，我在其中映射数据并在另一个中呈现它，但我不断收到此错误 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 也是另一个单独的组件（不在同一个文件中），这绝对没有意义，我清楚地返回了所需的内容。这可能是什么原因造成的？它是如何修复的？

【问题讨论】：

标签： javascript html reactjs

【解决方案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}
      />
    ))
  );
};

【讨论】：