React как удалить товар?

Question

[Вадим Семенников]

Всем привет!
Загружаю товары из JSON и вывожу их. Вот код:

import React, {Component} from 'react';
import GetJson from '../../service/service-class';


export default class Product extends Component {
    getProductsList = new GetJson();
    state = {
        productsList: []
    };

    componentDidMount() {
        this.getProductsList
            .getProducts()
            .then((productsList) => {
                this.setState({
                    productsList
                })
            })
    };

    items(arr) {

        return arr.map((product) => {
            return (
                <div key={product.id} className="col-md-3">


                    <div className="card">
                        <img src={product.url} className="card-img-top" alt="{product.name}"/>
                        <div className="card-body">
                            <h5 className="card-title">{product.name}</h5>
                            <p className="card-text">{product.description}</p>
                            <div className="price">Price: <span>{product.price}</span>$</div>
                        </div>
                        <button className="btn btn-danger" onClick={() => this.props.onDelete()}>X</button>
                    </div>


                </div>
            )
        })
    }

    render() {

        const {productsList} = this.state;
        console.log(productsList);
        if (!productsList) {
            console.log('null');
        }
        const items = this.items(productsList);
        return (
            <div className="row">
                {items}
            </div>
        )
    }
}

Подскажите, пожалуйста, как правильно удалять товары по одиночке и все вместе.
Кстати console.log(productsList); выводится два раза и первый раз NULL. почему?

Answer 1

[Антон Спирин]

Подскажите, пожалуйста, как правильно удалять товары по одиночке и все вместе.

Если на беке нет API и вы загружаете данные из json файла, то никак.

Кстати console.log(productsList); выводится два раза и первый раз NULL. почему?

Потому-что componentDidMount срабатывает после вызова render. Это нормально.

Comments

[Вадим Семенников]

Антон Спирин я загружаю данные со стороннего API. Они ведь записываются в state

state = {
        productsList: []
    };

    componentDidMount() {
        this.getProductsList
            .getProducts()
            .then((productsList) => {
                this.setState({
                    productsList
                })
            })
    };

Мне данные получается надо передавать файлом?

[Антон Спирин]

Вадим Семенников, а у вас на стороннем API есть права на удаление товаров?

Мне данные получается надо передавать файлом?

Нет, не надо.

[Вадим Семенников]

Антон Спирин, это https://www.mocky.io/

[Вадим Семенников]

Со state получается работать нельзя?

[Антон Спирин]

Вадим Семенников, в этом нет смысла. У вас приходит mock списка товаров. Вы не можете внести изменения в его структуру запросом.

Если просто интересно как удаляются данные из массива состояния, то посмотрите реализацию любого Todo List.

А запросом данные обычно удаляют так:
1. DELETE запрос на сервер.
2. Если ответ 200, удаляем товар из хранилища.

return {
  ...state,
  state.items.filter(item => item.id !== id),
};

3. Древо компонентов перерисовывается, нужный элемент удален.

[Антон Спирин]

Вадим Семенников,

Со state получается работать нельзя?

Со state работать можно и нужно. Я просто не понимаю, что вы сделать хотите.
Вы можете удалить товар на клиенте, но при перезагрузке он снова появится.

[Вадим Семенников]

Антон Спирин, Да, я понимаю, что после перезагрузки все вернется. Мне просто необходимо удалить элемент в этой "сессии".

[Антон Спирин]

Вадим Семенников,

<button className="btn btn-danger" onClick={() => this.onDelete(product.id)}>X</button>

onDelete(id) {
  this.setState(state => ({
    productsList: state.productsList.filter(product => product.id !== id),
  }));
}

[Вадим Семенников]

TypeError: Cannot read property 'filter' of undefined

[Антон Спирин]

Вадим Семенников, в вашем примере productsList, в моем productList. Поправьте и все должно заработать.

[Вадим Семенников]

Ошибки нет, но ничего не меняется((((

[Антон Спирин]

Вадим Семенников, код покажите, а лучше в песочнице опубликуйте.

[Вадим Семенников]

Антон Спирин, Спасибо огромное!!!