是否可以将状态传递给作为prop传递的组件？

Question

我正在尝试将term从HomeStackScreen传递到HomeScreen函数中，该函数曾用于在HomeStack中创建.Screen。我尝试过将它作为道具和HomeStack.Screen中的初始参数传递。我可以更改状态，并可以通过下面的console.log()确认。好像是我的Home组件在创建后没有重新渲染/更新，但是我不确定如何强制执行该更新。我不确定我缺少什么逻辑，如果有人能够指出正确的方向，我将不胜感激。

我已经在控制台中包含了我的代码，实际输出以及我认为我在下面的控制台中编写的内容。

任何技巧或指针都很好。提前致谢。

    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 />
  );
}`