ReactJS

Question

我是 ReactJS 的新手，所以我尝试开发一个小应用程序来了解它是如何工作的。它是一个从 API 中获取数据（用户）并显示它的界面。我还可以添加数据和删除用户。添加工作正常，但我在删除时遇到问题。

Json 组件（父级）

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>
    )
  }
}

卡片组件（子）

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>)
  }
}

当我删除用户时，Json 的 state.items 会根据删除相应更新，但卡片不会相应地重新呈现。事实上，道具被传递给卡片，但它总是最后一个从视图中删除，而 console.log 表明一切都很好......

Answer 1

可能是在渲染没有 key 属性的组件数组时出现的问题。

当您在 React 中渲染组件数组时，如下所示：

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

您需要为每个项目指定唯一的 key 属性。它将帮助 React 知道哪个元素发生了变化并且应该重新渲染。

例如：

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

阅读这篇文章lists-and-keys.html

ReactJS - 子项在父项更改后无法正确重新呈现

ReactJS - Children do not re-render correctly after change in parent

javascript

api

children

parent