Как динамически изменить утверждение true / false внутри объекта json в React.js - PullRequest
Новая
       39

Как динамически изменить утверждение true / false внутри объекта json в React.js

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

Я пытаюсь добавить и удалить продукт при нажатии кнопки, и каждая кнопка находится в отдельном компоненте, а данные, из которых я получаю, находятся в компоненте storeData, где внутри находится объект со статусом true / false, если статус true, продукт должен отображаться в компоненте корзины; если false, продукт будет удален.

теперь в компоненте ProductList, когда я нажимаю кнопку добавления, статус меняется на true, но он не меняет фактическое состояние в компоненте storeData, поэтому при переходе к компоненту Cart ничего не отображается

Я знаю, что я делаю это неправильно, так как я могу выполнить эту операцию добавления и удаления, я новичок в React.js, поэтому, пожалуйста, любая помощь будет действительно признательна.

Компонент ProductList 

import itemlist from "../storeData/storeData";
import { Link } from "react-router-dom";

class ProductList extends Component {
  state = {
    items: itemlist.items,
    addToCart: null
  };
  addItem(id) {
    let itemArray = [];
    itemlist.cartItems.filter(target => {
      return id === target.id ? itemArray.push(target) : null;
    });
    const addToCart = itemArray[0];
    addToCart.status = false;
    this.setState({ addToCart });
  }

  render() {
    return (
      <div className="list-wrap">
        {this.state.items.map(item => {
          return (
            <div key={item.id}>
              <Link to={{ pathname: "/productdetail", itemdetail: item }}>
                <img alt="item img" src={item.posterUrl} />
              </Link>
              <h2>{item.title}</h2>
              <h3>${item.price}</h3>
              <button onClick={() => this.addItem(item.id)}>Add to Cart</button>
            </div>
          );
        })}
      </div>
    );
  }
}

export default ProductList;

Компонент корзины 

import itemlist from "../storeData/storeData";

class Cart extends Component {
  state = {
    cart: itemlist.cartItems,
    remove: null
  };
  removeItem(id) {
    let itemArray = [];
    itemlist.cartItems.filter(target => {
      return id === target.id ? itemArray.push(target) : null;
    });
    let remove = itemArray[0];
    remove.status = false;
    this.setState({ remove });
  }

  render() {
    return (
      <div>
        {this.state.cart.map(itm => {
          return itm.status === false ? null : (
            <div key={itm.id} className="cart-layout">
              <img alt="img" src={itm.posterUrl} />
              <h4>{itm.title}</h4>
              <h4>{itm.price}</h4>
              <button onClick={() => this.removeItem(itm.id)}>Remove</button>
            </div>
          );
        })}
      </div>
    );
  }
}

компонент storeData 

let itemlist = {
  items: [
    {
      id: 1,
      title: "name 1",
      price: "232",
      posterUrl:
        "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg"
    },
    {
      id: 2,
      title: "name 2",
      price: "65",
      posterUrl:
        "https://images-na.ssl-images-amazon.com/images/M/MV5BMTY5NTc2NjYwOV5BMl5BanBnXkFtZTcwMzk5OTY0MQ@@._V1_SX300.jpg"
    },
  ],
  cartItems: [
    {
      id: 1,
      status: false,
      title: "name 1",
      price: "232",
      posterUrl:
        "https://images-na.ssl-images-amazon.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg"
    },
    {
      id: 2,
      status: false,
      title: "name 2",
      price: "65",
      posterUrl:
        "https://images-na.ssl-images-amazon.com/images/M/MV5BMTY5NTc2NjYwOV5BMl5BanBnXkFtZTcwMzk5OTY0MQ@@._V1_SX300.jpg"
    },
  ]
};

1 Ответ

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

Я не думаю, что вы используете фильтр правильно здесь, в любом компоненте. Вы путаете тест фильтра с действием создания вашего массива. Все, что вам нужно с фильтром - это тест, который вернет логическое значение и который создаст для вас массив.

Попробуйте изменить: 

let itemArray = [];
itemlist.cartItems.filter(target => {
      return id === target.id ? itemArray.push(target) : null;
    });

К 

const itemArray = itemlist.cartItems.filter(target => id === target.id);

И так же в компоненте корзины.

Подробнее о filter см. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

...