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浏览器的快照： Web snapshot

Answer 1

问题在于效果挂钩中的toggle位于陈旧的闭包中：

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

上面的回调仅运行一次，因此存在的childs始终具有modeToggle初始值toggle的{{1}}道具。即使调用true，由于changeToggle回调不会再次运行，因此useEffect仍保留其初始的childs属性。

我将有条件地渲染toggle －将布尔值置于指示是否渲染的状态，这样就可以在父级返回的JSX中自然传递该道具：

childs

Answer 2

@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

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

2 个答案: