我使用的反應,終極版的時候,但我發現以下異常:錯誤:findComponentRoot使用div的
foo.js:10 Uncaught Error: findComponentRoot(..., .0.$data.0.0.$22): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a when using tables, nesting tags like
<form>
,<p>
, or<a>
, or using non-SVG elements in an parent. Try inspecting the child nodes of the element with React ID
當我按下面的按鈕:
let mapStateToProps = (state) => {
const user = state.user.get("user");
return {
data: state.data.get("data"),
loading: state.pausedAlarms.get("loading"),
userId: user&&user.id
}
};
let mapActionsToProps = (dispatch) => {
return {
getData() {
dispatch(getData());
},
selectUser(user){
dispatch(selectUser(user));
},
};
};
let Foo = React.createClass({
componentWillMount() {
this.props["getData"]();
},
shouldComponentUpdate(nextProps, nextState) {
if(nextProps["userId"] !== this.props["userId"]) {
nextProps["getData"]();
}
return true;
},
render() {
const {
data,
selectUser,
loading
} = this.props;
if (loading) {
return (
<div id="3" key="3">LOADING</div>
);
}
else if (data){
return (
<div id="1" key="1">
<div id="11" key="11">
HEADER
</div>
<button
id="2"
key="22"
onClick={
e => {
selectUser(new User({id:1,name:"Foo"}))
}
}
>Click</button>
</div>
);
}
else{
return null;
}
}
});
按下按鈕調度動作selectUser,它用userId
的新值更新我的redux狀態。這會導致shouldComponentUpdate調用nextProps["getData"]();
。動作getData
從調度開始,使減速器中的loading
設置爲true。
上面的代碼呈現正如所料,它只是我在控制檯窗口中看到一個異常。
如果我做了以下代替:
shouldComponentUpdate(nextProps,nextState){
if(nextProps["userId"] !== this.props["userId"]) {
nextProps["getData"]();
return false;
}
return true;
},
我的代碼工作正常,但沒有例外。 我在做什麼錯?我該如何調試這個問題?
'selectUser'做什麼? – Timo
@Timo它調度導致state.user.set(「user」,user)的redux操作 – Baz
@Timo更改此狀態將導致nextProps [「getData」]()在shouldComponentUpdate中被調用。 – Baz