Javascript 在子组件中传递和调用的函数无权访问父状态值
我有一个父组件和一个子组件 父组件具有我要访问的状态变量 我将一个函数传递给子组件,并在那里调用onClick 但是,状态变量的值已过期-不是当前值Javascript 在子组件中传递和调用的函数无权访问父状态值,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我有一个父组件和一个子组件 父组件具有我要访问的状态变量 我将一个函数传递给子组件,并在那里调用onClick 但是,状态变量的值已过期-不是当前值 function Parent(props) { const [items, setItems] = useState([]); function getItems () { console.log(items); // always prints "[]" } useEffect(() =&g
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是如何工作的 将给出正在发生的事情的基本概念 由于依赖关系,useEffect只运行一次。因此,当呈现子组件时,项是一个空数组[]。您的子组件将始终具有此项实例,因为更新的项未调用useEffect 希望这有帮助 编辑: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}/>)
}
嗯,是的,当然,点击按钮记录[]。在这方面:
<Child id={item.id} getItems={getItems}/>
您可以通过使用[]工具栏按钮的堆栈片段使示例可运行来帮助他人。堆栈代码段支持React,包括JSX。我还不太熟悉钩子,但我猜您需要在useEffect的dependencies数组中包含项。例如,将[]更改为[items]。@T.J.Crowder,这会导致无限循环:useffect调用=>items更新=>useffect调用=>…因此…我对hooks的不熟悉让我感到痛苦。:-无论如何,祝你好运@T.J.克劳德谢谢你!你认为这是一个相关的问题吗?不仅仅是简单的javascript作用域?是的,我觉得这很正确!然而,我正在研究这个话题,仍然可以想出一个解决这个问题的办法。你能告诉我什么可以解决这个问题吗?我建议不要在useEffect中创建子组件。只需更新项目。并使用贴图渲染外部的子组件。已经更新了原始答案。非常感谢!!哇,成功了!非常感谢你!我花了4个小时在这上面!我没有意识到创建React组件数组可能会导致这种行为。