ReactJS - дети не повторно отображают правильно после изменения родителя

Question

Я новичок в ReactJS, поэтому я попытался разработать небольшое приложение, чтобы понять, как он работает. Это интерфейс, который захватывает данные (пользователей) из API и отображает их. Я также могу добавить данные и удалить пользователей. Добавление работает, но у меня есть проблемы с удалением.

Json Компонент (Parent)

class Json extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = {items: []} 
    this.updateDelete = this.updateDelete.bind(this) 
    this.updateAdd = this.updateAdd.bind(this) 
    } 

    componentDidMount() { 
    this.grabusers(); 
    } 

    grabusers() { 
    var request = new Request('http://localhost:4000/users', { 
     method: 'GET', 
     mode: 'cors' 
    }); 
    fetch(request).then(result=>result.json()).then(items=>this.setState({items: items})) 
    } 

    updateDelete(user){ 
    var i = this.state.items.indexOf(user) 
    var items = this.state.items 
    items.splice(i,1) 
    this.setState({items: items}) 
    } 

    updateAdd(user){ 
    var items = this.state.items 
    items.push(user) 
    this.setState(items) 
    } 

    render(){ 
    return (
     <div> 
     <Form updateJson={this.updateAdd}/> 
     <div className="row"> 
      {this.state.items.map(item => <Card item={item} updateJson={this.updateDelete}/>)} 
     </div> 
     </div> 
    ) 
    } 
} 

Card Компонент (ребенок)

class Card extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state = {item: props.item} 
    this.delete = this.delete.bind(this) 
    } 

    delete(){ 
    var request = new Request('http://localhost:4000/users/'+this.state.item._id, { 
     method: 'DELETE', 
     mode: 'cors' 
    }); 
    fetch(request).then(() => this.props.updateJson(this.state.item)) 
    } 

    render(){ 
    return (
     <div className="col-md-4"> 
     <div className="Card row"> 
     <div className="col-md-2"><span className="glyphicon glyphicon-user icon" aria-hidden="true"></span></div> 
     <div className="col-md-10"><Fullname firstname={this.state.item.firstname} lastname={this.state.item.lastname}/> 
     <City city={this.state.item.city}/></div> 
     <button type="button" className="btn btn-danger buttondelete" onClick={this.delete}>Delete</button> 
     </div> 
     </div>) 
    } 
} 

При удалении пользователя, state.items из обновлений Json соответственно к удалению, но Карты не пересматривается соответствующим образом. Фактически, реквизит передается на карты, но он всегда является последним, который удаляется из представления, тогда как console.log показывает, что все в порядке ...

Answer 1

Возможно, проблема в рендеринге массива компоненты без объекта key.

Когда вы предоставляете массив компонентов в React, как здесь:

{this.state.items.map(item => <Card item={item} updateJson={this.updateDelete}/>)}

вам необходимо указать уникальный key свойство для каждого элемента. Это поможет Реагировать, знать, какой элемент изменен и должен быть отменен.

Например:

{this.state.items.map((item, index) => <Card key={'card-' + index} item={item} updateJson={this.updateDelete}/>)}

Читать эту статью lists-and-keys.html