ReactJS список родитель/ребенок элементы не отображается правильно после того, как элемент удаляется

Question

Пример:

В приложении я работаю, я есть родительский контейнер (List, в моем примере), который содержит список детей (Герой, в моем примере). Список управляется внешним объектом. Для простоты я объявил объект непосредственно в JS. (В моем реальном приложении хранилище данных должным образом помещено в имена и т. Д.)

Проблема, которая у меня есть, в списке у меня есть три элемента, если я удаляю элемент из середины, отображается список, который удаляет последний элемент. Однако внешний объект отражает правильный список.

Например:

• Мой список содержит элементы: колпачок, Thor, Халка
• Если удалить "Thor", "шапку" и "Thor" визуализируются
• heroList отражает " cap "и" hulk ", как это должно быть

Я относительно новичок в ReactJs, так что есть хороший шанс, что мое помещение в корне ошибочно.

Примечание: пример отражает гораздо более сложное приложение. Он структурирован аналогично для демонстрации. Я знаю, что вы могли бы создать один компонент, но это не было бы практичным в реальном приложении.

Любая помощь будет оценена по достоинству.

Вот код из JSFiddle:

var heroList = [ 
    { name: "cap" }, 
    { name: "thor"}, 
    { name: "hulk"} 
    ]; 

    var List = React.createClass({ 
    getInitialState() { 
     console.log("heros", heroList); 
     return { 
     heros: heroList 
     }; 
    }, 

    onChange(e){ 
     this.setState({heros: heroList}); 
    }, 

    removeHero(i,heros){ 
     var hero = heros[i]; 
     console.log("removing hero...", hero); 
     heroList = _.filter(heroList, function(h){ return h.name !== hero.name;}); 
     this.setState({heros:heroList}); 
    }, 

    render() { 
     var heros = this.state.heros; 

     var createHero = (hero,index) => { 
     return <Hero hero={hero} key={index} onRemove={this.removeHero.bind(this,index,heros)}/>; 
     }; 


     console.log("list", heros); 

     return ( 
     <ul> 
      {heros.map(createHero)} 
     </ul> 
     ) 
    } 
    }); 

    var Hero = React.createClass({ 

    getInitialState() { 
     return { 
     hero: this.props.hero 
     } 
    }, 

    render() { 
     var hero = this.state.hero; 
     return (
     <li>Hello {hero.name} | <button type="button" onClick={this.props.onRemove}>-</button></li> 
    ); 
    } 
    }); 

    ReactDOM.render(
    <List />, 
    document.getElementById('container') 
); 

Дополнительно: У меня были проблемы копирования кода из JSFiddle, все, что я сломал случайно должен работать в JSFiddle, перечисленных в верхней части этого вопроса.

Edit:

Основываясь на комментарии от madox2, nicole, nuway и Damien Leroux, вот что я в конечном итоге делает:

https://jsfiddle.net/wbellman/ghuw2ers/10/

Я хотел бы был способ, чтобы дать каждому кредит, вы все были большой помощью.

Answer 1

Проблема с ключами.Поскольку ключ взят из индекса, этот ключ уже используется и, таким образом, показан герой с этим ключом.

изменить его key={Math.random() * 100} и он будет работать

Answer 2

Изменение класса героя этого исправили проблему отображения неправильное имя героя для меня:

var Hero = React.createClass({ 
    render() { 
    return (
     <li>Hello {this.props.hero.name} | <button type="button" onClick={this.props.onRemove}>-</button></li> 
    ); 
    } 
}); 

т.е. я удалил локальное состояние из класса и использовать опору непосредственно.

Вообще-то, попробуйте использовать локальный магазин только тогда, когда вам это действительно нужно. Постарайтесь думать о своих компонентах как о безгражданстве, то есть они получают что-то через реквизит и отображают его, вот и все.

Вдоль этих строк вам следует рассмотреть возможность передачи списка героев через реквизиты в свой компонент List.

Answer 3

, если у вас действительно есть проблемы с управления вашими данными, вы должны использовать Flux или Redux.

в этом коде:

heroList = _.filter(heroList, function(h){ return h.name !== hero.name;}); 

я просто не понимаю, почему вы FILER в heroList вместо this.state.heros? каждый раз, когда вы добавляете или удаляете героя, список героя в вашей текущей области не должен храниться в состоянии? глобальный heroList - это только начальное состояние.