我有一个父组件和一个子组件。
父组件有我想要访问的状态变量。
我将一个函数传递给子组件并在那里调用它 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>
}
最佳答案
您可能想看看 javascript closure 是如何工作的有效。
将给出正在发生的事情的基本概念。
由于依赖性,useEffect
只会运行一次。因此,当渲染子组件时,items
是一个空数组 ([]
)。您的子组件将始终具有此 items
实例,因为 useEffect
不会使用更新的 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}/>)
}
关于javascript - 在子组件中传递和调用的函数无权访问父状态值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55090236/