VadimRosh
@VadimRosh
Старый я, но решил перепрофилироваться. Учусь...

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

Всем привет!
Загружаю товары из 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. почему?
  • Вопрос задан
  • 231 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Подскажите, пожалуйста, как правильно удалять товары по одиночке и все вместе.

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

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

Потому-что componentDidMount срабатывает после вызова render. Это нормально.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы