Question

我有一个包装其他组件的组件，并在加载所有必要数据时有条件地呈现它们。但是，我发现了类型错误 - 与the prop x is marked as required in component Y but its value is undefined一致。 prop x是尚未从服务器返回的数据，component Y是数据返回时将呈现的子组件。

以下是我所谈论的一个例子：

<Wrapper contentLoaded={hasDataLoaded && !!dataThatWillLoad}>
  <ComponentWithData
    dataThatWillLoad={dataThatWillLoad}
    dataThatAlreadyExists={dataThatAlreadyExists}
   />
</Wrapper>

和我的包装器组件：

const Wrapper = ({ contentLoaded, children }) => {
  if (contentLoaded) return children;
  return <p>Loading</p>;
}

这会产生错误Prop dataThatWillLoad is marked as required in component ComponentWithData but its value is undefined。

这对我来说似乎很奇怪，因为ComponentWithData甚至不会被呈现，直到数据回来。这是否与检查proptypes时有关？这个特殊的数据是通过mapStateToProps进入组件的，可能与它有关吗？

谢谢！

Answer 1

你写的方式，孩子将永远被创造，导致你的问题。通过无条件地将它们作为子项添加到您的包装器组件中，React会在将它们添加到子prop之前创建它们。另一种方法是使用组件本身为包装器添加一个prop。您可以在React路由器提供的Route组件中看到此示例：https://reacttraining.com/react-router/web/api/Route

使用此设计模式，您应该能够通过仅在加载道具时渲染组件并在不加载道具时加载单独的组件来跳过渲染。

编辑：TLDR：你设置它的方式，创建ComponentWithData组件并在作为子包装给你的包装器之前给出道具。

在呈现组件之前反应proptypes警告？

1 个答案: