Question

我有一个基本的“包装器”组件，其中包含子“物品”组件

class Wrapper extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: []
       };
    }
    render() {
        return (
            <div>Items count- {this.state.items.length}
                    {this.state.items.map(function (item, i) {
                        <Item itemId={item.itemId} />
                    })}
            </div>
        );
    }
}




class Item extends React.Component {
    constructor(props) { super(props); }
    render() {
        return (
            <div class="item">{this.props.itemId}</div>
        );
    }
}

我是否致电setState({ "items":[{ "itemId": 22 }] });来更新UI中的项目？

想添加/删除“ item”并相应地更新用户界面。

Answer 1

状态不是可变的，因此您在此处显示的代码将items替换为具有一个对象的数组。如果要添加/删除数组，则首先需要以某种方式复制数组，然后用新数组替换。您应该为此使用setState的函数参数。例如：

this.setState(function (currentState) {
  return {items: currentState.concat({itemId: 22})}
});

Answer 2

对于更新，您想要执行以下操作...

// Update item
this.setState({ "items":this.state.items.map(function(item) {
    if (item.itemId !== 22) return item;
    // update item here

    // remember to return item
    return item
  })
});

// Remove item
this.setState({ "items":this.state.items.filter(item => {
  return item.itemId !== 22
})
})

// Add item
this.setState({ "items": this.state.items.concat(newItem)
})

我建议将它们放入React类方法中。

从'react'导入React；

class Wrapper extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
          items: []
     };
     this.addItem = this.addItem.bind(this)
     this.removeItem = this.removeItem.bind(this)
     this.updateItem = this.updateItem.bind(this)
  }
  addItem (item) {
    this.setState({
      items: this.state.items.concat(item)
    })
  }
  updateItem(id, updatedItem) {
    this.setState({
      items: this.state.items.map(function (item) {
        if (item.itemId !== id) return item;
        return updatedItem;
      })
    })
  }
  removeItem(id) {
    this.setState({
      items: this.state.items.filter(function(item) {
        return item.itemId !== id
      })
    })
  }
  render() {
      return (
          <div>Items count- {this.state.items.length}
            {this.state.items.map(function (item, i) {
                <Item itemId={item.itemId} />
            })}
          </div>
      );
  }
}




class Item extends React.Component {
  constructor(props) { super(props); }
  render() {
      return (
          <div class="item">{this.props.itemId}</div>
      );
  }
}

Answer 3

这是您add和remove往返州项目数组的方式：

class Wrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
  addItems = (id) => {
  // copies all current items and adds a new one
  this.setState({items: [...this.state.items, {itemId: id}]
  })
  }
  removeItems = (id) => {
  const newItemList = this.state.items.filter((item) => item.itemId !== id)
  this.setState({items: newItemList
  })
  }
  render() {
    return (
    <div>
    <div>Items count - {this.state.items.length}
      
      <button onClick={() => this.addItems(this.state.items.length + 1)}>Add Item</button>
      
      
      </div>
      {
        this.state.items.map((item) => { 
        return (
          <Item key={item.itemId} itemId={item.itemId} removeItems={this.removeItems} />
        )
        })
      } 
      </div>
    );
  }
}

ReactDOM.render(<Wrapper />, document.getElementById('root'))


class Item extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div className="item">test{this.props.itemId} <button onClick={() => this.props.removeItems(this.props.itemId)}>Remove Item</button></div>;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

数组更新时ReactJS组件更新

3 个答案: