React Native：渲染的钩子比之前的渲染错误更多答案

【问题标题】：React Native: Rendered more hooks than during the previous render errorReact Native：渲染的钩子比之前的渲染错误更多
【发布时间】：2020-06-20 05:59:51
【问题描述】：

我在这个屏幕上的 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会修复重新渲染的原始错误消息？

【问题讨论】：

标签： reactjs react-native react-hooks react-native-ios

【解决方案1】：

嗯，错误很明显。当loading 为真时只调用useState，而useState 和useCallback 在不为真时调用，所以react 抱怨hook 的数量不一致。修复很可能是侥幸。这一次，当loading 为真时，不会调用任何钩子，而当它不是时，它们都会被渲染。 React 的源代码可能不会让“渲染的钩子数量”检查该数字最初是否为零，因此没有错误。

正如警告告诉你的那样，有条件地调用钩子（在任何钩子之前写一个 return 语句）是一个坏主意。在这种特定情况下，它可能不会破坏您的应用程序，但总体而言这是一种不好的做法。每次渲染都会调用钩子，并且 react 需要正确跟踪它们。

我会把所有的钩子（在这种情况下是useState 和useCallback）放在条件返回之前。我看不出有什么理由不这样做。

【讨论】：