React Native:渲染的钩子比上一次渲染错误时多

Question

我在这个屏幕上的react本机应用程序中收到Rendered more hooks than during the previous render错误：

const HomeScreen = props => {
  const [refreshing, setRefreshing] = useState(false);
  if (props.data.loading) { // error shows its located here
    return <Text>Loading...</Text>; 
  }
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);
  return (
    <View style={styles.container}>
      <FlatList
        data={props.data.sample}
        renderItem={({item}) => <Card {...item} user={props.data.user} />}
        keyExtractor={item => item._id}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }
      />
    </View>
  );
};

但是当我把useState移到if语句下面时：

const HomeScreen = props => {
  if (props.data.loading) { // error shows its located here
    return <Text>Loading...</Text>; 
  }
  // moved here, change in the order of hooks...
  const [refreshing, setRefreshing] = useState(false); 
  const onRefresh = useCallback(() => {
    setRefreshing(true);
    wait(2000).then(() => setRefreshing(false));
  }, [refreshing]);

我收到警告：

Warning: React has detected a change in the order of Hooks called by "HomeScreen". This will lead to bugs and errors if not fixed...

当我的应用程序热重新加载时，我会收到这个错误，但当我解除警告并强制重新加载时它不会出现。我只是想确保把这个移到if语句下面是可以的。

此外，我不知道为什么移动useState会修复重新渲染的原始错误消息？

Answer 1

这个错误是显而易见的。当loading为true时，只调用useState，当不为true时调用useState和useCallback，所以react抱怨钩子数量不一致。这种修复很可能是侥幸。这一次，当loading为true时，不会调用任何钩子，而当不为true时则同时渲染这两个钩子。React的源代码可能不会检查"呈现的钩子数量"(如果该数字最初为零(，因此没有错误。

正如警告告诉的那样，有条件地调用hook(在任何hook之前编写一个返回语句(是个坏主意。在这种特殊情况下，它可能不会破坏你的应用程序，但总的来说，这是一种糟糕的做法。钩子在每次渲染时都会被调用，react需要正确跟踪它们。

我会将所有挂钩(在本例中为useState和useCallback(放在条件返回之前。我看不出有什么不这样做的理由。