3

I'm using react to mounting two same components on a page,

var SelectBox = React.createClass({
  getDefaultProps: function() {
    return {
      value: []
    };
  },
  getInitialState: function() {
    return {checked: this.props.value,count: 1};
  },
  handleClick: function() {
    var opt = this.state.checked;
    opt.push({id: this.state.count, name: this.state.count});
    this.setState({checked: opt, count: this.state.count + 1});
  },
  render: function() {
    var that = this;
    var options = this.state.checked.map(item => <option key={'checked-' + that.props.name + item.id} value={item.id}>{item.name}</option>);
    return (
      <div>
        <select multiple={true}>
          {options}
        </select>
        <button type="button" onClick={this.handleClick}>add</button>
      </div>
    );
  }
});
React.render(
  <SelectBox name='one'/>,
  document.getElementById('one')
);
React.render(
  <SelectBox name='two'/>,
  document.getElementById('two')
);

then click the button of the 'one', it's alright, but when i click the button of the 'two', some of 'one' crop up in 'two',why?? it make me confuse. console show:

Warning: flattenChildren(...): Encountered two children with the same key, `.$checked-two1`. Child keys must be unique; when two children share a key, only the first child will be used.

but just do some change

var a = [{id: 5, name: 5}];
React.render(
  <SelectBox name='one' value={a}/>,
  document.getElementById('one')
);

it work properly. what happenned?is there something wrong or it's bug?

3 Answers 3

4

Oh,I find the real reason,getDefaultProps is called once and cached, the any complex objects returned by getDefaultProps() will be shared across instances, not copied, so all SelectBox components without an explicit value prop passed will share the same checked array reference in state. in the case, i should write:

  getInitialState: function() {
    var tmp = this.props.value.concat();
    return {checked: tmp, count: 1};
  },
3

No, there is no bug here, you are rendering the same instance of the component twice which means that the 'components' share the same state but when you pass along different props the component now gets two states to keep track of.

3
  • Thank you for your answer, you mean all components without an explicit value will be the same instance? In the case ,i should provide an explicit value for every component?
    – alchemist
    Apr 1, 2015 at 6:09
  • No, just in your case and how the fiddle is set up. Apr 1, 2015 at 7:08
  • @limelights so how would I resolve this? I have the same issue and its most likely because of what you described. the use case is its a toaster and when a new notification comes in I unshift the array to add the new one to the beginning of the array (so they can load from the bottom), the previous notifications that are rendered get different props because they are to be rendered in a different spot now... but the notification itself doesn't change. Dec 10, 2015 at 2:35
1

This problem seems to come up for me when I set the keys in a list style react component, and the id's passed into the keys are not unique, as the error description suggests.

e.g. 2 of the list items have a key of 1.

This is usually due to an error in the logic of setting up your unique id's.

For my example I was using a redux store for the applications state, and I was setting the id of the item to be items.length + 1 which was incorrect.

This caused the two children with the same key error above for me. To fix it, I set each new item's id to be the number of itemsAdded to the list over time.

It is similar to keys in a database where the id keeps incrementing, so you can have no items in the database due to deleting them all, however your id for the next item could be 1000.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.