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

Question

I have a written a loading component for my React Native App that shows a loading screen as long as the data is not retrieved. This looks something like this:

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

The problem is that I get an exception indicating that information.name is undefined.

It seems to me that even tough I conditionally render the Text View, React is still preparing or evaluting it and because my information is undefined it fails. If I replace information.name with information?.name it works and I see the loading screen, followed by the information screen.

I'm I doing something wrong? Could I tell React not to evalute the children?

Answer 1

Since you are not doing anything with children in LoadingChecker , I don't really see the point of having LoadingChecker encapsulate everything to be honest.

I would do something like this instead:

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>
)

Otherwise if you want to keep your current structure, I don't think you could do anything better than information?.name like you suggested youself.

Answer 2

It seems to me that even tough I conditionally render the Text View, React is still preparing or evaluting it and because my information is undefined it fails

No, you're wrong here. If you're conditionally rendering some children, React will not prepare (there's no concept like that in React though) them on its own. To prove this issue I created a sandboxhere , where I conditionally rendering a child component that uses an updated state value. As long as the state is not updated the parent component, LoadingChecker , will not render its child component, <p>Loaded done. {data.message}</p> <p>Loaded done. {data.message}</p> not it shows any error for {data.message} rather it'll show 'loading' text. So, I think here you've some different issues with the shape of the data you're fetching.