0

我试图在单击按钮时添加和删除产品，每个按钮都在不同的组件中，我从中获取的数据在 storeData 组件中，如果状态为，则内部有一个具有真/假状态的对象true 产品应显示在购物车组件中，如果 false 它将删除产品。

现在在 ProductList 组件中，当我单击添加按钮时，状态将更改为 true，但它不会更改 storeData 组件中的实际状态，因此当我转到 Cart 组件时的结果没有显示

我知道我这样做是错误的，所以我该如何执行这个添加和删除操作，我是 React.js 的新手，所以请任何帮助将不胜感激。

产品列表组件

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>
    );
  }
}

存储数据组件

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"
    },
  ]
};
4

1 回答 1

0

我认为您在这两个组件中都没有正确使用过滤器。您将过滤器测试与组成数组的操作混淆了。过滤器所需要的只是一个返回布尔值并为您构造数组的测试。

尝试改变：

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

于 2019-03-07T15:58:58.503 回答