React：将状态或数据从父组件传递到对象中的子组件

Question

我试图将状态或数据作为道具从父级传递给 状态对象 中的子级。当父组件点击按钮时，子组件的div会显示true或false的变化。

当 直接放在父组件中时，子组件成功呈现更改，但如果 在对象（状态）中声明，则不会。我已经尝试过上下文，即父组件中的createContext和子组件中的useContext，它也没有成功显示。

如果子组件在父组件的状态对象中，如何渲染变化？

请参考以下示例：

Parent.js（成功的代码）

import React, { useState, useEffect } from 'react'
import Child from './Child'

function Parent() {
    const [childs, setChilds] = useState()
    const [toggle, setToggle] = useState(true)
    const changeToggle = () => {
        setToggle(!toggle)
    }

    useEffect(() => {
        setChilds(<div><Child modeToggle={toggle} /></div>)
    }, [])

    return (
        <div>
            <div>
                <button onClick={changeToggle}>Change toggle</button>
            </div>
            <div>
                <div><Child modeToggle={toggle} /></div>
            </div>
        </div>
    )
}

export default Parent

Parent.js（不成功的代码）

import React, { useState, useEffect } from 'react'
import Child from './Child'

function Parent() {
    const [childs, setChilds] = useState()
    const [toggle, setToggle] = useState(true)
    const changeToggle = () => {
        setToggle(!toggle)
    }

    useEffect(() => {
        setChilds(<div><Child modeToggle={toggle} /></div>)
    }, [])

    return (
        <div>
            <div>
                <button onClick={changeToggle}>Change toggle</button>
            </div>
            <div>
                {childs}
            </div>
        </div>
    )
}

export default Parent

Child.js

import React, {  useEffect } from 'react'

function Child(props) {
    useEffect(()=>{
        console.log(props.modeToggle)
    },[props.modeToggle])

    return (
        <div>{props.modeToggle.toString()}</div>
    )
}

export default Child

网页浏览器截图： Web snapshot

Answer 1

@CertainPerformance，感谢您的回答。我根据您对获得类似解决方案的回答。非常感谢。

如果在状态对象中，似乎无法直接获取更新的值。

import React, { useState, useEffect } from 'react'
import Child from './Child'

function Parent() {
    const [childs, setChilds] = useState()
    const [toggle, setToggle] = useState(true)
    const changeToggle = () => {
        setToggle(!toggle)
    }

    useEffect(() => {
        setChilds(<div><Child modeToggle={toggle} /></div>)
    }, [toggle])

    return (
        <div>
            <div>
                <button onClick={changeToggle}>Change toggle</button>
            </div>
            <div>
                {childs}
            </div>
        </div>
    )
}

export default Parent

Answer 2

问题在于效果钩子内的toggle 是一个过时的闭包：

useEffect(() => {
    setChilds(<div><Child modeToggle={toggle} /></div>)
}, [])

上面的回调只运行一次，所以存在的childs总会有一个modeToggleprop，初始值为toggle，即true。即使changeToggle 被调用，由于useEffect 回调不会再次运行，childs 仍保留其初始toggle 属性。

我会有条件地渲染 childs - 将布尔值放入状态以指示是否渲染它，因此可以在父级返回的 JSX 中自然地传递道具：

function Parent() {
    const [toggle, setToggle] = useState(true)
    const changeToggle = () => {
        setToggle(!toggle)
    }

    const [showChilds, setShowChilds] = useState(false);
    useEffect(() => {
        setShowChilds(true);
    }, [])

    return (
        <div>
            <div>
                <button onClick={changeToggle}>Change toggle</button>
            </div>
            <div>
                {
                  showChilds
                    ? <div><Child modeToggle={toggle} /></div>
                    : null
                }
            </div>
        </div>
    )
}