Реагируйте Функциональный setState против разницы объектов - PullRequest
Новая
       6

Реагируйте Функциональный setState против разницы объектов

0 голосов
/ 09 марта 2019

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 () упомянутых компонентов и обнаружил, что версия объекта вообще удаляет свойство, поэтому нулевое значение не передается компонентам, в то время как функционал сохраняет нулевое значение при передаче состояния компонентам.

...