ReactJS父级子引用具有过时的子级状态
ReactJS父级子引用具有过时的子级状态
提问于 2021-11-07 19:08:35
我使用useRef()从我的父组件调用一个childs函数。问题是，每当父函数调用childs undo函数时，childs (betHistory)为空，但当子节点本身调用undo()时，状态为date (填充了已推送给它的所有值)。为什么我的父母在调用betHistory时会看到undo()的空版本，而当孩子本身调用undo()时，会看到undo()的空版本？
父级
import './App.css';
import Table from './Table';
import React, { useEffect, useState, useRef } from 'react';
function App() {
const table = useRef();
function undo() {
table.current.undo();
}
return (
<div className="App">
<div className="table-section">
<Table ref={table}></Table>
</div>
<div className="button" onClick={undo}>Click me</div>
</div>
);
}
export default App;孩子
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import './Table.css';
function Table(props, ref) {
const [betHistory, setBetHistory] = useState([]);
const [betCount, setBetCount] = useState(0);
function placeBet(element) {
const newBetHistory = [...betHistory, betCount.toString()];
setBetHistory(newBetHistory);
setBetCount((1 + betCount));
}
function undo() {
console.log(betHistory);
}
useImperativeHandle(ref, () => ({
undo() {
undo();
}
}), [])
return (
<div className="button" onClick={undo}>Click me</div>
<div className="bet-button" onClick={placeBet}></div>
);
}
export default forwardRef(Table)回答 1
Stack Overflow用户
回答已采纳
发布于 2021-11-07 19:13:21
useImperativeHandle(ref, () => ({
undo() {
undo();
}
}), []) // ---> Try remove this []它与您指定的空数组有关。试着移除它。就像在useEffect中将空数组指定为依赖项时，它只运行一次，因此在其中捕获的函数是从第一个呈现开始的，因此您看不到最近的数据。
也可以指定正确的依赖项。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69875707
复制相关文章
相似问题
腾讯云开发者
