Question

在此屏幕上，我的本机应用程序出现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

嗯，错误很明显。当useState为真时，仅调用loading，否则为useState和useCallback都被调用，因此react抱怨钩子的数目不一致。解决方法很可能是a幸。这次在loading为true时不调用任何钩子，而在非useState时为钩子。 React的源代码可能不会使“呈现的钩子数”最初检查该数字是否为零，因此没有错误。

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

在有条件返回之前，我会把所有的钩子（在这种情况下为useCallback和UITableView）都放在上面。我看不出有任何理由不这样做。

React Native：与上次渲染错误相比，渲染了更多的钩子

1 个答案: