有没有办法将状态传递给作为道具传递的组件？

Question

我正在尝试将 term 从 HomeStackScreen 传递到我用来在我的 HomeStack 中创建 .Screen 的 HomeScreen 函数。我试过将它作为道具和 HomeStack.Screen 中的初始参数传递。我可以更改状态，并且可以使用下面的 console.log() 进行确认。似乎是我的 Home 组件在创建后不是 re-rendering/updating，但我不确定如何强制更新。我不确定我缺少什么逻辑，如果有人能够指出我正确的方向，我将不胜感激。

我在下面包含了我的代码、控制台的实际输出以及我认为我正在写入控制台的内容。

任何提示或指示都会很棒。提前致谢。


    import React, {useState}from 'react';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from '../screens/home';
    import HeaderLeft from '../components/headerLeft';
    import HeaderRight from '../components/headerRight';


    function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }

    const HomeStack = createStackNavigator();

    function HomeStackScreen() {
        const [term, setTerm] = useState('First State');

        console.log(term);

        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name=" " 
                component= {HomeScreen} initialParams = {{term}}
                    options = {{
                        headerStyle:{
                            backgroundColor: "#121212",
                            borderBottomColor:'#121212', 
                            height:105,
                            shadowColor:'transparent'
                        },
                        headerLeft: () => <HeaderLeft/>,
                        headerRight: () => <HeaderRight setTerm = {setTerm}/>,
                    }}/>
          </HomeStack.Navigator>
        )
    }

    export default HomeStackScreen;

控制台：

First State
Made it here!undefined
Second State

我以为我正在向控制台写入的内容：

First State
Made it here!First State
Second State
Made it here!Second State

Answer 1

假设您使用的是 react-navigation v5，传递参数有变化，您可以查看 here

在

`function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }`

能不能改成

`function HomeScreen({route: {
  params: { term },
},}) {
  console.log('Made it here!'.concat(term))
  return (
    <Home />
  );
}`

Answer 2

初始参数属性可以在route.params对象内部访问

route.params

示例：

  function HomeScreen({ navigation, route }) {
        console.log('Made it here!'.concat(route.params.term))
        return (
            <Home />
        );
    }

示例 2：

https://snack.expo.io/BRK9_n_Dj

有没有办法将状态传递给作为道具传递的组件？

Is there a way to pass a state to a component that was passed as a prop?

react-native

react-native-navigation