无法为react.js组件设置密钥

Question

Once again, what seems like the most trivial of tasks has brought my project to a halt. Here is my situation:

I'm using react.js inside an ASP.NET 4.5 MVC 6 SPA. I have designed such that I have three main areas where I use react: a top menu, a side menu and a main content area. Because of the timing and loading requirements of the different areas, i have 3 separate react component hierarchies, one for each major section. Perhaps that is part of the issue right there, but somewhere i got the idea that this is allowable.

So at a point, I pull a list of top menu nodes from a web service, and bind them to a top menu react component, then do the same for the side menu. When someone clicks on one of the menu items, it loads new data into the content panel area, and these are react components which i load into a div.

Everything works as expected to a point, until i attempt to unload the component in the content panel, before i load a new one into it. When i call ReactDOM.unmountComponentAtNode() passing in my div I get the following:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same data-reactid : .0(…)

I have a couple of qualms at this point:

• first off i don't understand why it seems to be looking everywhere in the DOM for react nodes, when I've passed in a specific element i want unmounted. within the scope of the DOM element i've specified there's only one react component; i would expect that to suffice.

• secondly, my many attempts to set specific keys on the top-level react components have failed. I read and understand the advice/rule that you have to set the key from outside the component as you create it, and not directly on the elements from inside, so my components are created as:

  ReactDom.render(<ManageCommunitiesContainer brandData={mcmData} key="manageComms" />, $("#reactRoot")[0]);

i've added unique keys to each of the three top-level components i'm using, and yet when i inspect them in the react plug-in for chrome's developer tools, all 3 have the same data-reactid , which is simply '.0'.

I have set keys on child objects from inside react within loops with no issues. But on my top-level components added via javascript nothing i do results in them having meaningful run-time values...what does a person have to do to assign unique keys to root components, and thus be able to un-mount them later? because i can't un-mount them, they're piling up in memory.

thanks.

Answer 1

React keys aren't the same as the data-reactid . Understand that React Components are not the same as DOM Elements. There's a good React blog article that explains the difference between Components, Instances and Elements.

I'll say that trying to manually unmount components and render completely new trees is doing things the hard way. React's strengths show when you just do an initial render and then manipulate your state to cause React to update the DOM elements.

My first suggestion is to try to get back to a single component hierarchy. The timing requirements can be captured in the state of the root component. Something like this:

class TopMenu extends React.Component {
  render() {
    const data = this.props.data;

    if (!data) {
      return <div>Loading...</div>;
    }

    // render your menu with the data provided...
    return <div>{data}</div>;
  }
}

class SideMenu...
class Content...

class Page extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      topMenuData: undefined,
      sideMenuData: undefined,
      contentData: undefined
  }

  componentDidMount() {
    // call ready callback provided via props with this instance
    // so someone outside can update our state when data loads
    this.props.ready(this);
  }

  render() {
    return (
      <div>
        <TopMenu data={this.state.topMenuData} />
        <SideMenu data={this.state.sideMenuData} />
        <Content data={this.state.contentData} />
      </div>);
  }
}


// main js code
function pageMounted(page) {
  // register callbacks with your code that is loading data from
  // the server.
  topMenuLoader.then(data => page.setState({ topMenuData: data }));
  sideMenuLoader.then(data => page.setState({ sideMenuData: data }));
  contentLoader.then(data => page.setState({ contentData: data }));
}

React.render(<Page ready={pageMounted} />, rootElement);

With this style, eventually you might be able to move the loading logic to somewhere within the React component hiearchy itself and get rid of that ready callback which is letting the outside world update the state.

Even if you cannot create a single component hierarchy due to your constraints, you can use the same basic idea of that ready callback to create 3 top-level React hierarchies that you never destroy and instead just supply new data via setState whenever you need to change what is rendered.

Answer 2

Past midnight several days later answer: seems to have something to do with my always using the same element id for the html wrapping tag.

i thought it'd be smart to always specify the element which contained the react stuff as having the same id, so i could programmatically find it, then un-mount the component, then flat-out .clear() the contents so as to ready it to hold a new piece of mark-up, whether react or not.

eventually i saw that a few tests i had done a while ago were using unique element id's and had worked as planned, so i've changed enough of them now to believe this is impactful. as ever, it's not 100% clear to me why my approach caused it to choke, seems like a legitimate enough set of actions to take from where i sit, but...there you have it.

hope it helps someone sometime.