Question

我正在使用REACT JS和一个名为ALT的FLUX IMPLEMENTATION。

我从一个有效的React组件开始：

    ConfirmEditModal = React.createClass({

    getInitialState(){

        console.log('ConfirmEditModal - getInitialState');

        var state = {sample: 'MY_SAMPLE_STATE'};
        console.log(state);
        return state;
    },
    onChange(state){
        console.log('ConfirmEditModal - onChange');
        console.log(state);
        this.setState(state);
    },
    componentDidMount(){
        console.log('ConfirmEditModal - componentDidMount');
        //SeedStore.listen(this.onChange);
    },

    componentWillUnmount(){
        //SeedStore.unlisten(this.onChange);
    },


    render(){

        return (
            <div className="ui modal edit">
                <i className="close icon"></i>
                <div className="header">Form For Editing</div>
                <div className="content">

                    <div className="ui form">
                        <h4 className="ui dividing header">Birth Information</h4>

                        <div className="field">
                            <label>Name</label>
                            <input name="name" type="text" placeholder="Name"></input>
                        </div>
                    </div>
                </div>
            </div>

            );

    }
});

请注意SeedStore.listen(this.onChange）和SeedStore.unlisten(this.onChange)的注释掉的代码。只要注释掉这两行，上面的代码就可以正常工作。这两行是使用ALT（FLUX IMPLEMENTATION）收听商店所需的代码。如果我取消注释这两行，我将最终得到这段代码：

    ConfirmEditModal = React.createClass({

    getInitialState(){

        console.log('ConfirmEditModal - getInitialState');

        var state = {sample: 'MY_SAMPLE_STATE'};
        console.log(state);
        return state;
    },
    onChange(state){
        console.log('ConfirmEditModal - onChange');
        console.log(state);
        this.setState(state);
    },
    componentDidMount(){
        console.log('ConfirmEditModal - componentDidMount');
        SeedStore.listen(this.onChange);
    },

    componentWillUnmount(){
        SeedStore.unlisten(this.onChange);
    },


    render(){

        return (
            <div className="ui modal edit">
                <i className="close icon"></i>
                <div className="header">Form For Editing</div>
                <div className="content">

                    <div className="ui form">
                        <h4 className="ui dividing header">Birth Information</h4>

                        <div className="field">
                            <label>Name</label>
                            <input name="name" type="text" placeholder="Name"></input>
                        </div>
                    </div>
                </div>
            </div>

            );

    }
});

我收到此错误：

Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.4.2.0.1.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

我想了解导致此错误的幕后情况，因为据我了解它....听商店只是意味着你听商店里的任何状态变化就是这样......它与父子组件和查找元素无关.......

这个错误背后的解释是什么？

我不会认为听到商店会影响元素的发现，如错误所示。

其他stackOverflow文章Q / A对此表明DOM中的更改并非意图.....但是收听商店不应该影响DOM的权利???因此我的困惑......

这个错误背后的逻辑和解释是什么？

React JS + ALT（Flux）：了解不变违规findComponentRoot（...，.0.1.1.0.4.2.0.1.1）：无法找到元素

0 个答案: