我怎樣才能點擊特定按鈕而不是所有按鈕

Question

我正在嘗試創建一個Add和Remove按鈕，但我遇到了問題，當我單擊一個按鈕時，所有其他按鈕也被單擊了。

這是我的以下代碼：

function MyFruits() {

  const fruitsArray = [
    'banana',
    'banana',
    'orange',
    'orange',
    'strawberry',
    'blackberry',
  ];

  const cartArray : any[] = [];

  let unique = [...new Set(fruitsArray)];
  unique.sort((a, b)  => {
    return a.localeCompare(b);
  })
  
  const [addButton, setAddButton] = useState(true);
  const [removeButton, setRemoveButton] = useState(false);
  const [itemList, setItemList] = useState(fruitsArray)

  const [cart, setCart] = useState<typeof cartArray>([])

  const addClick = (fruit: any, index: any) => {
    setItemList([...itemList]);
    setCart([...cart, fruit]);
    setAddButton(false);
    setRemoveButton(true);
  }

  const removeClick = (fruit: any, index: any) => {
    let removeItem = [...cart];
    removeItem = removeItem.filter((cartItem) => cartItem !== fruit);
    setCart(removeItem);
    setAddButton(true);
    setRemoveButton(false);
  }

  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {unique.map((fruit, index) => (
          <div>
              <li key={index}>{fruit}</li>
              {itemList.length !== 1 && addButton && (
                <button onClick={() => addClick(fruit, index)}>Add</button>
              )}

              {removeButton && (
                <button onClick={() => removeClick(fruit, index)}>Remove</button>
              )}
          </div>
        ))}
        </ul>
        <div className="cart">
        Cart: {cart.map(cartItem => (
          <p>{cartItem}</p>
        ))}
        </div>
      </header>
    </div>
  );
}

export default MyFruits;

如何改進我的點擊 function Add和Remove ？

Answer 1

您必須跟蹤數組中每個水果的addButton和removeButton state 更改。 因此最好創建 state 個對象，例如addButtonFruits和removeButtonFruits來跟蹤它們。

我已經創建了一個類似於您的代碼的 JavaScript 實現，並嘗試將其用作您實現的支持材料。

import React, { useEffect, useState } from "react";

function App() {
  const fruitsArray = [
    "banana",
    "banana",
    "orange",
    "orange",
    "strawberry",
    "blackberry",
  ];

  const cartArray = [];

  let unique = [...new Set(fruitsArray)];
  unique.sort((a, b) => {
    return a.localeCompare(b);
  });

  const [addButtonFruits, setAddButtonFruits] = useState({});
  const [removeButtonFruits, setRemoveButtonFruits] = useState({});
  const [itemList, setItemList] = useState(fruitsArray);

  const [cart, setCart] = useState([]);

  /*
    instead of having this useEffect, you can directly set the default state using useState as follows:

        const [addButtonFruits, setAddButtonFruits] = useState(
            {
                banana: true,
                orange: true,
                strawberry: true,
            });
  */
  useEffect(() => {
    const initialAddButtonFruits = {};
    fruitsArray.forEach((each) => (initialAddButtonFruits[each] = true));
    console.log("initial add-fruit-buttons state: ", initialAddButtonFruits);
    setAddButtonFruits(initialAddButtonFruits);
  }, []); // only executed for initial rendering

  const addClick = (fruit, index) => {
    setItemList([...itemList]);
    setCart([...cart, fruit]);

    const addButtonFruitsTemp = addButtonFruits;
    addButtonFruitsTemp[fruit] = false;

    setAddButtonFruits(addButtonFruitsTemp);

    const removeButtonFruitsTemp = removeButtonFruits;
    removeButtonFruitsTemp[fruit] = true;

    setRemoveButtonFruits(removeButtonFruitsTemp);
  };

  const removeClick = (fruit, index) => {
    let removeItem = [...cart];
    removeItem = removeItem.filter((cartItem) => cartItem !== fruit);
    setCart(removeItem);

    const addButtonFruitsTemp = addButtonFruits;
    addButtonFruitsTemp[fruit] = true;

    setAddButtonFruits(addButtonFruitsTemp);

    const removeButtonFruitsTemp = removeButtonFruits;
    removeButtonFruitsTemp[fruit] = false;

    setRemoveButtonFruits(removeButtonFruitsTemp);
  };

  console.log("addButtonFruits: ", addButtonFruits);
  console.log("removeButtonFruits: ", removeButtonFruits);

  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {unique.map((fruit, index) => (
            <div>
              <li key={index}>{fruit}</li>
              {itemList.length !== 1 && addButtonFruits[fruit] && (
                <button onClick={() => addClick(fruit, index)}>Add</button>
              )}

              {removeButtonFruits[fruit] && (
                <button onClick={() => removeClick(fruit, index)}>
                  Remove
                </button>
              )}
            </div>
          ))}
        </ul>
        <div className="cart">
          Cart:{" "}
          {cart.map((cartItem) => (
            <p>{cartItem}</p>
          ))}
        </div>
      </header>
    </div>
  );
}

export default App;

以下是視圖

希望這能解決您的問題。