連接不同組件的狀態

Question

我的應用程序包含三個不同的組件。 在 ProductList 組件 (comp.) 中，我有一個商店中可用產品的列表。 在我單擊此列表中的元素后，它應該出現在 ShoppingList comp 中。 它在我應用狀態並將其傳輸到 App comp 后起作用。 然后可以在單擊元素后從購物列表中刪除，這要歸功於 useEffect 但應用程序的用戶應該能夠在刪除某些內容時添加新產品。

在我的代碼中，當用戶添加一些產品時，接下來刪除一兩個，然后用戶想要添加一些新的應用程序從頭開始呈現所有數組。 購物清單示例：出現：牛奶、面包、果汁->（用戶刪除果汁）->出現：牛奶、面包->（用戶添加黃油）->出現：牛奶、面包、果汁、黃油（應該出現：牛奶、牛油面包）。

在我的代碼中，我連接了按刪除元素過濾的數組，並將其發送到我的 ProductList 以使用 props.sendRemovedProductsToParent(productList) 修改 productsToBuy。 我想如果我一開始就從數組中刪除元素，我應該“修復”這個我在 useState 中調用的數組。 但它不起作用。

也許我應該在刪除項目后卸載購物清單並再次加載，或者我必須將“刪除” function 發送到 ShoppingList 組件？

我已經使用 function 組件和 class 組件進行練習。

應用程序

 function App() {
  const [resultToDisplay, setResultToDisplay] = useState(``);
  const [resultRemoved, setResultRemoved] = useState(``);

  return (
    <div className={styles.appWrapper}>
      <AddProducts />
      <ProductsFilters />
      <div className={styles.columnsWrapper}>
        <ProductsList
          productsToDisplay={produkty}
          sendAddedProductsToParent={setResultToDisplay}
          resultRemoved={resultRemoved}
        />
        <ShopingList
          resultToDisplay={resultToDisplay}
          sendRemovedProductsToParent={setResultRemoved}
        />
      </div>
    </div>
  );
}

購物清單

function ShopingList(props) {
  const [productList, setProductList] = useState(props.resultToDisplay);

  useEffect(() => {
    setProductList(props.resultToDisplay);
  }, [props.resultToDisplay]);

  function removeClick(e, index) {
    e.preventDefault();
    // console.log(index);
    // console.log(productList);
    setProductList(productList.filter((currProduct, i) => i !== index));
    props.sendRemovedProductsToParent(productList);
  }

  return (
    <div className={commonColumnsStyles.App}>
      <header className={commonColumnsStyles.AppHeader}>
        <p>Shoping List</p>
        <ul>
          {productList.length
            ? productList.map((currProduct, index) => (
                <li onContextMenu={(e) => removeClick(e, index)} key={index}>
                  {currProduct.nazwa}
                </li>
              ))
            : null}
        </ul>
      </header>
    </div>
  );
}

產品列表

class ProductsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { productsToBuy: this.props.resultRemoved };

    this.addProduct = this.addProduct.bind(this);
  }

  addProduct(index) {
    console.log(this.props.resultRemoved);
    const toBuy = Array.from(this.state.productsToBuy);
    toBuy.push(this.props.productsToDisplay[index]);
    this.setState({
      productsToBuy: toBuy,
    });
    this.props.sendAddedProductsToParent(toBuy);
    // console.log(toBuy);
  }

  render() {
    return (
      <div className={commonColumnsStyles.App}>
        <header className={commonColumnsStyles.AppHeader}>
          <p>Products list</p>
          <ul>
            {this.props.productsToDisplay.map((currProduct, index) => (
              <li key={index} onClick={() => this.addProduct(index)}>
                {currProduct.nazwa}
              </li>
            ))}
          </ul>
        </header>
      </div>
    );
  }
}

Answer 1

如果你想在不同的組件中使用一些狀態，你必須使用 state 管理，如 React context 或 redux 或其他。

如果你的狀態不是太大並且邏輯不復雜你可以用反應上下文來實現它。

這是一個簡單的例子。 您可以對其進行編輯並在您的應用中使用。

import React, { createContext, useState } from 'react';

const ProductContext = createContext();

function ProductProvider({ children }) {
  const [products, setProducts] = useState([]);

  function addProduct(product) {
    setProducts([...products, product]);
  }

  function deleteProduct(productId) {
    setProducts(products.filter(product => product.id !== productId));
  }

  return (
    <ProductContext.Provider value={{ products, addProduct, deleteProduct }}>
      {children}
    </ProductContext.Provider>
  );
}

export { ProductContext, ProductProvider };

在索引中，您可以使用上下文提供程序包裝應用程序：

 <ProductProvider>
      <App />
 </ProductProvider>