在 React 中"Cannot update during existing state transaction"漫游

Question

我有以下代码片段，它给了我一个无限循环，错误消息"在现有状态事务期间无法更新">

export const Child = (props) => {
console.log("rendering child element");
const retrieveValue = () => {
return "dummy";
}
const val = retrieveValue();
props.callback(val);
return (
<p>Hello World</p>
)
}
class App2 extends Component {
state = {
property: ""
}
callback = (val) => {
this.setState({property: val});
}
render() {
return (
<div>
<h1>{this.state.property}</h1>
<Child callback={this.callback}/>
</div>
);
}
}
render(<App2 />, document.getElementById('root'));

错误消息是有道理的，但让我感到困惑的是，为什么将类组件更改为函数组件并使用 useState 钩子会解决问题。

const App = () => {
const [property, setProperty] = React.useState("");
const callback = (val) => {
setProperty(val);
}
return (
<div>
<h1>{property}</h1>
<Child callback={callback}/>
</div>
);
}

是否有任何其他漫游可以让我实现相同的目的但不使用函数组件？

该用例对我来说非常通用，子组件正在尝试初始化一些数据，并且在某些边缘情况下，我想公开该数据以供父组件或同级组件呈现。

堆栈闪电战链接

Answer 1

在渲染方法中，当你调用"props.callback(val(;"时，setState方法被调用。所以它进入了一个无限循环。 您可以在此处使用 shouldComponentUpdate 方法来停止重复渲染。

shouldComponentUpdate(nextProps, nextState) {
return this.state.property != nextState.property;
}

Answer 2

@Abhijit 无限循环的 Sil 解释是正确的。另一种方法是在子组件中使用useEffect：

export const Child = (props) => {
console.log("rendering child element");
const retrieveValue = () => {
return "dummy";
}
useEffect(()=>{
const val = retrieveValue();
props.callback(val);
}, [])
return (
<p>Hello World</p>
)
}