如何解决ReactJS状态意外更改
我正在使用反应中的用户界面。 我目前面临的一个问题是我真的不知道如何调试。 组件的状态以某种方式意外地更改。我没有任何代码可以更改状态变量。
按下按钮时会发生突变,但是我没有写任何修改此状态变量的代码。在React中有没有办法查看谁/哪个函数对状态进行了更改?一个人将如何调试这种情况?
解决方法
您在问题中提到了“状态变量”,但是问题中显示的唯一代码使用道具而不是状态。
道具由父元素控制,即使创建了组件,道具也可以更改它们。这是一个示例:
class Example extends React.Component {
constructor(props) {
super(props);
console.log("constructor");
}
render() {
console.log("render");
return <div>{this.props.childprop}</div>;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0};
}
componentDidMount() {
const handle = setInterval(() => {
this.setState(({value}) => ({value: value + 1}));
},500);
this.cleanup = () => {
clearInterval(handle);
};
setTimeout(this.cleanup,2000);
}
componentWillUnmount() {
if (this.cleanup) {
this.cleanup();
}
}
render() {
const {value} = this.state;
return <Example childprop={value} />;
}
}
ReactDOM.render(<App />,document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>
在创建App
组件之后,请注意childProp
的代码如何更改Example
中Example
的值。这样做会使组件重新呈现。
因此,如果父处理程序的值已更改,则事件处理程序中的代码可以轻松查看其更新的属性值。
, Ciao,一种拦截component
是否正在接收道具更新的方法是componentWillReceiveProps()
函数(现在称为UNSAFE_componentWillReceiveProps()
)。拦截component
是否改变状态的一种方法是componentWillUpdate()
函数(现在称为UNSAFE_componentWillUpdate()
),请尝试使用它们来调试应用程序(也许您会看到一些异常行为,有助于了解问题的原因。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。