Question

我的 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 />}

Also Block 是另一个单独的组件（不在同一个文件中），这完全没有意义，我明确地返回了所需的内容。什么可能导致这种情况？怎么修的？

Answer 1

看起来就像你创建组件的方式一样，如果没有传递过渡，它确实返回 undefined，如果事务未定义，你可以通过返回 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}
      />
    ))
  );
};

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

1 个答案: