search

storybook-eol / react-treebeard

React Tree View Component. Data-Driven, Fast, Efficient and Customisable.
http://storybooks.github.io/react-treebeard
MIT License
1.69k stars 294 forks source link

Encountered two children with the same key. When I use this with redux and redux-simple-router #19

Closed sarike closed 8 years ago

sarike commented 8 years ago

Thanks for your god job first.

When I use this with redux and redux-simple-router, some question occur to me.

Following is my code:

entry.js

ReactDOM.render((
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <Route path="services" component={ServiceList}/>
                <Route path="service/:id" component={ServiceDetail}/>
            </Route>
        </Router>
    </Provider>
), document.getElementById('container'));

App

var App = React.createClass({
    render: function() {
        return (
            <div>
                <Header/>
                <div id="ocean-body">
                    <SideBar/>
                    <MainContent content={this.props.children}/>
                </div>
            </div>
        );
    }
});

SideBar

render: function() {
        return (
            <div id="ocean-sidebar">
                <ServiceTree tree={data} />
            </div>
        );
    }

ServiceTree

render: function() {
        return (
            <div id="service-tree">
                <Treebeard
                    data={this.props.tree}
                    onToggle={this.onToggle}
                />
            </div>
        );
    }

In addition, I customize the Header

decorators.Header = function (props) {
    var style = props.style;
    var node = props.node;
    var linkUrl = node['isServiceUnit'] == '1' ? '/service/' + node.id : '/services';
    return (
        <div className="node-header" style={style.base}>
            <div style={style.title}>
                <Link to={linkUrl}>{props.node.name}</Link>
            </div>
        </div>
    );
};

Problem is than when I Trigger a url router，some warnings will show as follow: image

I am sorry for my poor English.

alexcurtis commented 8 years ago

@sarike Could you please send over a small example of your data that you send into treebeard that causes these warnings.

sarike commented 8 years ago

If I don't use redux-simple-router, this work correctly.

Data:

"{
    "name": "HOME",
    "pid": "33879",
    "isServiceUnit": "0",
    "id": "171"
    "children": [
        {
            "name": "111",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "61972"
        },
        {
            "name": "22121",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "61973"
        },
        {
            "name": "agent_manager_center",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "26938"
        },
        {
            "name": "ANode",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "61857"
        },
        {
            "name": "TEST_dev01",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1081"
        },
        {
            "name": "TEST_dev02",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1040"
        },
        {
            "name": "TEST_dev03",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "8505"
        },
        {
            "name": "TEST_dev04",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1638"
        },
        {
            "name": "TEST_dev05",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "11335"
        },
        {
            "name": "TEST_dev06",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1456"
        },
        {
            "name": "TEST_dev07",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "11365"
        },
        {
            "name": "TEST_test01",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1137"
        },
        {
            "name": "TEST_test02",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "8494"
        },
        {
            "name": "TEST_test03",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "27848"
        },
        {
            "name": "as",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "62001"
        },
        {
            "name": "bocaiMac",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "54785"
        },
        {
            "name": "cetus",
            "pid": "171",
            "isServiceUnit": "0",
            "id": "1169"
            "children": [
                {
                    "name": "TEST_test01",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "12658"
                },
                {
                    "name": "cetus_linux",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "1171"
                },
                {
                    "name": "cetus_win",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "1170"
                },
                {
                    "name": "EBJ3901",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "54787"
                },
                {
                    "name": "log_agent_linux",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "27843"
                },
                {
                    "name": "log_agent_win",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "28422"
                },
                {
                    "name": "mac_bingxin",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "37140"
                },
                {
                    "name": "wmtest",
                    "pid": "1169",
                    "isServiceUnit": "1",
                    "id": "61937"
                }
            ]
        },
        {
            "name": "crux_agent",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1489"
        },
        {
            "name": "crux_alarm",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1197"
        },
        {
            "name": "crux_reader",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1070"
        },
        {
            "name": "crux_save",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "1068"
        },
        {
            "name": "crux_tmp",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "27852"
        },
        {
            "name": "docker",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "61984"
        },
        {
            "name": "EBJ4230",
            "pid": "171",
            "isServiceUnit": "1",
            "id": "43911"
        },
        {
            "name": "fraud",
            "pid": "171",
            "isServiceUnit": "0",
            "id": "61868"
            "children": [
                {
                    "name": "deploy",
                    "pid": "61868",
                    "isServiceUnit": "0",
                    "id": "61871"
                    "children": [
                        {
                            "name": "a",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61975"
                        },
                        {
                            "name": "fraud",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61941"
                        },
                        {
                            "name": "fraud_web",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61891"
                        },
                        {
                            "name": "testlogcrux",
                            "pid": "61871",
                            "isServiceUnit": "0",
                            "id": "62035"
                            "children": [
                                {
                                    "name": "logcrux",
                                    "pid": "62035",
                                    "isServiceUnit": "1",
                                    "id": "62036"
                                },
                                {
                                    "name": "testlog2",
                                    "pid": "62035",
                                    "isServiceUnit": "1",
                                    "id": "62039"
                                }
                            ]
                        },
                        {
                            "name": "test_add_del",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61960"
                        },
                        {
                            "name": "test_gotty",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "62042"
                        },
                        {
                            "name": "test_new_reg",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "62063"
                        },
                        {
                            "name": "test_resouce",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61954"
                        },
                        {
                            "name": "write",
                            "pid": "61871",
                            "isServiceUnit": "1",
                            "id": "61872"
                        }
                    ]
                },
                {
                    "name": "docker_build",
                    "pid": "61868",
                    "isServiceUnit": "0",
                    "id": "61869"
                    "children": [
                        {
                            "name": "aaaaaaaaaaaaaaaa",
                            "pid": "61869",
                            "isServiceUnit": "1",
                            "id": "62027"
                        },
                        {
                            "name": "yuyu",
                            "pid": "61869",
                            "isServiceUnit": "1",
                            "id": "61999"
                        }
                    ]
                },
                {
                    "name": "qatest",
                    "pid": "61868",
                    "isServiceUnit": "0",
                    "id": "61957"
                    "children": [
                        {
                            "name": "testb",
                            "pid": "61957",
                            "isServiceUnit": "1",
                            "id": "61967"
                        },
                        {
                            "name": "testc",
                            "pid": "61957",
                            "isServiceUnit": "1",
                            "id": "62002"
                        }
                    ]
                }
            ]
        }
    ]
}"
sarike commented 8 years ago

I have solved this question.

My fault, I generate tree data every time rendering the Sidebar.

Move it to getInitialState and use this.state.treeData as Treebeard's tree prop， all is well.

I am new to react, thanks again.