json - React.js の json オブジェクト内の true/false ステートメントを動的に変更する方法

Question

ボタンをクリックしたときに製品を追加および削除しようとしています。各ボタンは異なるコンポーネントにあり、取得しているデータは storeData コンポーネントにあり、ステータスが true/false の場合は true/false ステータスのオブジェクトがありますtrue の場合、商品はカート コンポーネントに表示されます。false の場合、商品は削除されます。

追加ボタンをクリックするとProductListコンポーネントでステータスがtrueに変わりますが、storeDataコンポーネントの実際のステータスは変更されないため、カートコンポーネントに移動しても何も表示されません

私はこれを間違った方法で行っていることを知っているので、この追加および削除操作をどのように実行できますか?

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