时间戳

首页 > 解决方案 > 在子组件中传递和调用的函数无权访问父状态值

javascript - 在子组件中传递和调用的函数无权访问父状态值

问题描述

我有一个父组件和一个子组件。

父组件具有我想要访问的状态变量。

我将一个函数传递给子组件并在那里调用它 onClick。

但是，状态变量的值已过时 - 而不是当前值。

function Parent(props) {
    const [items, setItems] = useState([]);

    function getItems () {
        console.log(items); // always prints "[]" 
    }

    useEffect(() => {
        thirdPartyApiCall().then((fetchedItems) =>
            let newItems = fetchedItems.map(item => <Child id={item.id} getItems={getItems}/>)
            setItems(newItems); // populates items array. "{items}" elements correctly displayed on web page
        );
    }, []);

}


function Child(props) {
    return <button onClick={props.getItems}>{props.id}</button>
}

标签： javascriptreactjsreact-hooks

解决方案

你可能想看看 javascript闭包是如何工作的。

将给出正在发生的事情的基本概念。

useEffect由于依赖关系，只会运行一次。所以当子组件被渲染items时是一个空数组（[]）。您的子组件将始终具有itemsasuseEffect没有被调用的这个实例 updated items。

希望这有帮助。

编辑：1

您可能希望您的父组件看起来像这样。

function Parent(props) {
    const [items, setItems] = useState([]);

    function getItems () {
        console.log(items); // always prints "[]" 
    }

    useEffect(() => {
        thirdPartyApiCall().then((fetchedItems) =>
            setItems(newItems);
        );
    }, []);

    return newItems.map(item => <Child key={item.id} id={item.id} getItems={getItems}/>)
}

推荐阅读