Question

s在做一个React课程时，我遇到了一种奇怪的情况，即从状态中删除对象。课程作者使用了非功能性状态更新，但是我试图使其功能化并出现错误。如果您能解释这两种方法的主要区别，那就太好了。首先要看状态：

{
  items: {item11 : {_item1Props_}, item2: {item2Pros}},
  order: {_some_suff_in_the_cart}
}

执行以下代码删除item2：

deleteItem = key => {
  const items= {...this.state.items, [key]: null};
  this.setState({items});
}

所有使用状态的组件均已更新，且没有错误（购物车，视图等）。尝试使setState功能正常，但使用以下代码在其他组件的渲染方法中出现错误：

deleteItem = key => {
  this.setState(prevState =>(
    {
     items: 
      {...prevState.items, [key]: null}
    }
  ));
}

以下代码也失败了：

deleteItem = key => {
  const items= {...this.state.items, [key]: null};
  this.setState(prevState => ({items}));
}

那么，这些方法必须有主要区别吗？预先谢谢你！

UPD 组件代码：使用状态有两个组件：

TypeError: _this$props$details is null

来自呈现项目的组件：

class Item extends Component {
  render() {
    const {name, desc, price, status, image} = this.props.details;
    const isAvailable = status === "available";
    return (
      <li className="menu-item">
        <img src={image} alt={name}/>
        <h3 className="item-name">
          {name}
          <span className="price">{formatPrice(price)}</span>
        </h3>
        <p>{desc}</p>
        <button 
          disabled={!isAvailable}
          onClick={()=>{this.props.addToOrder(this.props.index)}}
        >
          {isAvailable ? "Add To Cart" : "Sold Out"}
        </button>
      </li>
    );
  }
}

和

TypeError: this.props.item is null

来自用于编辑项目的组件：

class EditItemForm extends Component {
  handleChange = (e) => {
    const updatedItem = {
      ...this.props.item,
      [e.target.name]: e.target.value
    };
    this.props.updateItem(this.props.index, updatedItem);
  }

  render() {
    return (
      <div className="item-edit">
        <input 
          name="name" 
          type="text" 
          onChange={this.handleChange}
          value={this.props.item.name}
        />
        <input 
          name="price" 
          type="text" 
          onChange={this.handleChange}
          value={this.props.item.price}
        />
        <select 
          name="status" 
          value={this.props.item.status}
          onChange={this.handleChange}
        >
          <option value="available">Available</option>
          <option value="unavailable">Sold Out</option>
        </select>
        <textarea 
          name="desc" 
          type="text" 
          onChange={this.handleChange}
          value={this.props.item.desc}
        />
        <input 
          name="image" 
          type="text"  
          onChange={this.handleChange}
          value={this.props.item.image}
        />
      </div>
    );
  }
}

UPD2： 我记录了提到的组件的render（）方法，发现对象版本完全删除了属性，因此null不会传递给组件，而函数将状态传递给组件时会保留null值。

React Functional setState与对象差异

0 个答案: