当父 state 更改（钩子）时，React 子组件不会更新

Question

我有一个名为 Controller 的父组件。 在 Controller 中定义并更新了 testUser。

function Controller() {

    const [testUser, setTestUser] = useState("1")
    
    const myEvents = <MyEvents user={testUser} handleNav={handleNav}/>
    const joinedEvents = <JoinedEvents user={testUser} handleNav={handleNav}/>
    const mySurveys = <MySurveys user={testUser} handleNav={handleNav}/>
    const addUser = <NavLayout user={testUser} handleNav={handleNav}><AddUser/></NavLayout>

    const [content, setContent] = useState(myEvents)

    function handleNav(component) {
        if (component==="my-events") {
            setContent(myEvents)
        } else if (component==="joined-events") {
            setContent(joinedEvents)
        } else if (component==="my-surveys") {
            setContent(mySurveys)
        } else if (component==="add-user") {
            setContent(addUser)
        } else {
            console.log(component)
        }
    }

    return (
        <div>
            <label>User: {testUser} </label>
            <select 
                value={testUser}
                onChange={event => setTestUser(event.target.value)}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select> 

            <hr />

            {content}
            
        </div>
    )
}

export default Controller

当我更改下拉列表的值时，label 元素 ({testUser}) 中列出的值会正确更新。 但是，在 MyEvents 我有这个：

function MyEvents(props) {
    
    const overview = (
        <NavLayout handleNav={props.handleNav}>
            <div>
                <h1> My events: {props.user} </h1> 
                <EventsOverview user={props.user} handleEventNav={handleEventNav} handleReturn={handleReturn} status={"moderator"}/>
            </div>
        </NavLayout>
    )

    ...
}

MyEvents 正确显示 testUser 的初始值（初始化时设置的那个）。 但是，当 Controller 中的下拉值更改时，它不会更新。 不知道为什么会这样，因为它在父组件中更新得很好。

抱歉，如果我遗漏了一些明显的东西，被困了很长时间。 任何帮助深表感谢。

Answer 1

我有一个名为 Controller 的父组件。 在 Controller 中定义并更新了 testUser。

function Controller() {

    const [testUser, setTestUser] = useState("1")
    
    const myEvents = <MyEvents user={testUser} handleNav={handleNav}/>
    const joinedEvents = <JoinedEvents user={testUser} handleNav={handleNav}/>
    const mySurveys = <MySurveys user={testUser} handleNav={handleNav}/>
    const addUser = <NavLayout user={testUser} handleNav={handleNav}><AddUser/></NavLayout>

    const [content, setContent] = useState(myEvents)

    function handleNav(component) {
        if (component==="my-events") {
            setContent(myEvents)
        } else if (component==="joined-events") {
            setContent(joinedEvents)
        } else if (component==="my-surveys") {
            setContent(mySurveys)
        } else if (component==="add-user") {
            setContent(addUser)
        } else {
            console.log(component)
        }
    }

    return (
        <div>
            <label>User: {testUser} </label>
            <select 
                value={testUser}
                onChange={event => setTestUser(event.target.value)}
            >
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select> 

            <hr />

            {content}
            
        </div>
    )
}

export default Controller

当我更改下拉列表的值时，label 元素 ({testUser}) 中列出的值会正确更新。 但是，在 MyEvents 我有这个：

function MyEvents(props) {
    
    const overview = (
        <NavLayout handleNav={props.handleNav}>
            <div>
                <h1> My events: {props.user} </h1> 
                <EventsOverview user={props.user} handleEventNav={handleEventNav} handleReturn={handleReturn} status={"moderator"}/>
            </div>
        </NavLayout>
    )

    ...
}

MyEvents 正确显示 testUser 的初始值（初始化时设置的那个）。 但是，当 Controller 中的下拉值更改时，它不会更新。 不知道为什么会这样，因为它在父组件中更新得很好。

抱歉，如果我遗漏了一些明显的东西，被困了很长时间。 任何帮助深表感谢。