錯誤：findComponentRoot使用div的

我使用的反應，終極版的時候，但我發現以下異常：錯誤：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; 
    },

我的代碼工作正常，但沒有例外。我在做什麼錯？我該如何調試這個問題？

來源

2016-11-22 Baz

'selectUser'做什麼？ – Timo

@Timo它調度導致state.user.set（「user」，user）的redux操作 – Baz

@Timo更改此狀態將導致nextProps [「getData」]（）在shouldComponentUpdate中被調用。 – Baz

我想這個問題是由於您在調度shouldComponentUpdate中的一個操作而引起的。

可以在componentWillReceiveProps派遣它：

componentWillReceiveProps(nextProps) { 
    if(nextProps["userId"] !== this.props["userId"]) { 
     nextProps["getData"](); 
    } 
}

shouldComponentUpdate意，而不是更新的狀態，確定其是否應更新。看看下面的SO討論：

Is it OK to call setState from within shouldComponentUpdate?

更新1

檢查問題是否由渲染結構造成的。嘗試簡化它（刪除鍵，掛/卸節點等）：

getData() { 
    return (
     <div> 
      HEADER 
      <button onClick={ e => { selectUser(new User({id:1,name:"Foo"})) } }>Click</button> 
     </div> 
    ); 
} 

render() { 
    const { 
     data, 
     selectUser, 
     loading 
    } = this.props; 

    return (
     <div> 
      { loading ? 'LOADING' : null } 
      { (! loading) && data ? this.getData() : null } 
     </div> 
    ); 
}

來源

2016-11-25 10:18:38

我知道這個答案對'componentWillReceiveProps'和'shouldComponentUpdate'的使用是非常有意義的。但我想知道這是否真的解決了OP。 –

@Jordan Enev這並沒有解決問題。 – Baz

@Baz檢查問題是否由渲染結構引起。查看我的答案瞭解詳情。 –

錯誤：findComponentRoot使用div的

回答

相關問題