Блог

Проходя курс 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 при передаче состояния компонентам.