渲染不同的组件（`Home_Profile`）时无法更新组件（`ForwardRef(BaseNavigationContainer)`）答案

【问题标题】：Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Home_Profile`)渲染不同的组件（`Home_Profile`）时无法更新组件（`ForwardRef(BaseNavigationContainer)`）
【发布时间】：2022-01-03 06:45:19
【问题描述】：

我在尝试使用 react 本机堆栈导航器在屏幕之间导航时收到此错误。我认为这在我之前的项目中有效，该项目有 react 17.0.1 和 react native 0.64.2，这个项目是 react 17.0.2 和 react native 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;

Home_Profile

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;

【问题讨论】：

您可以添加您的 Home_Profile 代码吗？
添加了 Home_Profile

标签： javascript reactjs react-native

【解决方案1】：

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

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

【讨论】：