反应（本机）加载子组件错误

Question

我为我的 React Native App 编写了一个加载组件，只要未检索到数据，它就会显示加载屏幕。 这看起来像这样：

function LoadingChecker({ children, data }) {
  const notLoaded = data.filter((item) => !isLoaded(item));

  if (notLoaded.length > 0) {
    return (
      <View style={[styles.infoView, styles.centered]}>
        <MaterialCommunityIcons name="information-outline" color={Colors.grey} size={45} />
        <Text>Loading ...</Text>
      </View>
    );
  }

  return (
    { children }
  );
}

  return (
    <LoadingChecker data={[information]}>
      <View style={styles.mainView}>
        <Text>information.name</Text>
      </View>
    </LoadingChecker>
  );

问题是我得到一个异常，表明information.name未定义。

在我看来，即使我有条件地渲染文本视图，React 仍在准备或评估它，并且因为我的信息未定义它失败了。 如果我将information.name替换为information?.name它可以工作，我会看到加载屏幕，然后是信息屏幕。

我做错了什么？ 我可以告诉 React 不要评估孩子吗？

Answer 1

由于您没有对LoadingChecker中的children做任何事情，因此我真的不明白让LoadingChecker封装所有内容的意义。

我会做这样的事情：

function Loading() {
  return (
    <View style={[styles.infoView, styles.centered]}>
      <MaterialCommunityIcons name="information-outline" color={Colors.grey} size={45} />
      <Text>Loading ...</Text>
    </View>
  );
}

return !isLoaded(information) ? (
  <Loading />
) : (
  <View style={styles.mainView}>
    <Text>{information.name}</Text>
  </View>
)

否则，如果您想保持当前的结构，我认为您没有比information?.name就像您自己建议的那样。

Answer 2

在我看来，即使我有条件地渲染文本视图，React 仍在准备或评估它，因为我的信息未定义，所以它失败了

不，你错了。 如果你有条件地渲染一些孩子，React 不会自行准备（尽管 React 中没有类似的概念）它们。 为了证明这个问题，我在这里创建了一个沙箱，我在其中有条件地渲染了一个使用更新的 state 值的子组件。 只要 state 没有更新，父组件LoadingChecker就不会渲染其子组件， <p>Loaded done. {data.message}</p> <p>Loaded done. {data.message}</p>不会显示{data.message}的任何错误，而是显示“正在加载”文本。 因此，我认为您在获取的数据的形状方面存在一些不同的问题。