當父 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 中的下拉值更改時，它不會更新。 不知道為什么會這樣，因為它在父組件中更新得很好。

抱歉，如果我遺漏了一些明顯的東西，被困了很長時間。 任何幫助深表感謝。