渲染不同组件 (`Home_Profile`) 时无法更新组件 (`ForwardRef(BaseNavigationContainer)`)

Question

我在尝试使用 React Native Stack Navigator 在屏幕之间导航时收到此错误。我认为这在我之前的项目中起作用，该项目有反应 17.0.1 和反应本机 0.64.2，这个项目是反应 17.0.2 和反应本机 0.66.4，将不胜感激。

日志

Warning: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Home_Profile`). To locate the bad setState() call inside `Home_Profile`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

当我尝试在 Flatlist 渲染项组件上的 onPress 属性中调用导航时，会出现错误。

renderItem={({ item }) => (
  <View style={{ backgroundColor: "#f6f6f6" }}>
     <PostCard
        item={item}
        onPress={() => navigation.navigate("Home_Profile")}
     />
  </View>
)}

const PostCard = ({ item, onPress }) => {
  
  React.useEffect(() => {
    async function fetchUserData() {
      const data = await getUserData(item.userid);
      setProfileimg(data.userimg);
      setName(data.name);
      setLocation(data.location);
    }
    fetchUserData();
  }, []);

  return (
        <TouchableOpacity onPress={onPress}>
            <Text
                style={{
                    color: "#231454",
                    fontWeight: "bold",
                    fontSize: 15,
                    marginBottom: 3,
                }}
            >
                {name}
            </Text>
        </TouchableOpacity>
  )      
};

export default PostCard;

首页_公司简介

import React from "react";
import { View, Text, Button } from "react-native";

const Home_Profile = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home_Profile.js</Text>
      <Button title="back" onPress={navigation.navigate("Home")} />
    </View>
  );
};

export default Home_Profile;

Answer 1

我找到了问题的原因，当您渲染第二个屏幕时，它正在执行返回主页的按钮的 onPress 方法，并且导航会导致该主屏幕中的 render 方法执行，这意味着您正在尝试执行同时进行两个渲染，要解决这个问题，只需向导航主页功能添加一个箭头功能，如下所示：

onPress={()=>{navigation.navigate("Home")}}