"React.js 以狀態語法從數組中刪除項目"

Question

我想使用 prevState 語法從數組 onClick 中刪除一個項目。

這是我使用的示例代碼：

export default function App() {
  const [selected, setSelected] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [cards, setCards] = useState(["card1", "card2", "card3", "card4"]);

  function handleButtonClick(event) {
    setSelected(true);
    let key = event.target.id;
    key = parseInt(key, 10);
    if (selectedItems.indexOf(key) === -1) {
      
      setSelectedItems([...selectedItems, key]);
    } else {
      //  HOW do i remove the item from the array ????
      let index = selectedItems.indexOf(key);
    }
  }

  return (
    <div className="App">
      {cards.map((card, index) => (
        <button
          className={
            selected && selectedItems.indexOf(index) !== -1
              ? "button1 active"
              : "button1"
          }
          onClick={handleButtonClick}
          id={index}
        >
          {card}
        </button>
      ))}
    </div>
  );
}

Answer 1

我想使用 prevState 語法從數組 onClick 中刪除一個項目。

這是我使用的示例代碼：

export default function App() {
  const [selected, setSelected] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [cards, setCards] = useState(["card1", "card2", "card3", "card4"]);

  function handleButtonClick(event) {
    setSelected(true);
    let key = event.target.id;
    key = parseInt(key, 10);
    if (selectedItems.indexOf(key) === -1) {
      
      setSelectedItems([...selectedItems, key]);
    } else {
      //  HOW do i remove the item from the array ????
      let index = selectedItems.indexOf(key);
    }
  }

  return (
    <div className="App">
      {cards.map((card, index) => (
        <button
          className={
            selected && selectedItems.indexOf(index) !== -1
              ? "button1 active"
              : "button1"
          }
          onClick={handleButtonClick}
          id={index}
        >
          {card}
        </button>
      ))}
    </div>
  );
}

沙箱鏈接：https ://codesandbox.io/s/patient-thunder-mb1vx?file=/ src/App.js

Answer 2

我想使用 prevState 語法從數組 onClick 中刪除一個項目。

這是我使用的示例代碼：

export default function App() {
  const [selected, setSelected] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [cards, setCards] = useState(["card1", "card2", "card3", "card4"]);

  function handleButtonClick(event) {
    setSelected(true);
    let key = event.target.id;
    key = parseInt(key, 10);
    if (selectedItems.indexOf(key) === -1) {
      
      setSelectedItems([...selectedItems, key]);
    } else {
      //  HOW do i remove the item from the array ????
      let index = selectedItems.indexOf(key);
    }
  }

  return (
    <div className="App">
      {cards.map((card, index) => (
        <button
          className={
            selected && selectedItems.indexOf(index) !== -1
              ? "button1 active"
              : "button1"
          }
          onClick={handleButtonClick}
          id={index}
        >
          {card}
        </button>
      ))}
    </div>
  );
}

沙箱鏈接：https ://codesandbox.io/s/patient-thunder-mb1vx?file=/ src/App.js

Answer 3

我想使用 prevState 語法從數組 onClick 中刪除一個項目。

這是我使用的示例代碼：

export default function App() {
  const [selected, setSelected] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [cards, setCards] = useState(["card1", "card2", "card3", "card4"]);

  function handleButtonClick(event) {
    setSelected(true);
    let key = event.target.id;
    key = parseInt(key, 10);
    if (selectedItems.indexOf(key) === -1) {
      
      setSelectedItems([...selectedItems, key]);
    } else {
      //  HOW do i remove the item from the array ????
      let index = selectedItems.indexOf(key);
    }
  }

  return (
    <div className="App">
      {cards.map((card, index) => (
        <button
          className={
            selected && selectedItems.indexOf(index) !== -1
              ? "button1 active"
              : "button1"
          }
          onClick={handleButtonClick}
          id={index}
        >
          {card}
        </button>
      ))}
    </div>
  );
}

沙箱鏈接：https ://codesandbox.io/s/patient-thunder-mb1vx?file=/ src/App.js

Answer 4

我想使用 prevState 語法從數組 onClick 中刪除一個項目。

這是我使用的示例代碼：

export default function App() {
  const [selected, setSelected] = useState(false);
  const [selectedItems, setSelectedItems] = useState([]);
  const [cards, setCards] = useState(["card1", "card2", "card3", "card4"]);

  function handleButtonClick(event) {
    setSelected(true);
    let key = event.target.id;
    key = parseInt(key, 10);
    if (selectedItems.indexOf(key) === -1) {
      
      setSelectedItems([...selectedItems, key]);
    } else {
      //  HOW do i remove the item from the array ????
      let index = selectedItems.indexOf(key);
    }
  }

  return (
    <div className="App">
      {cards.map((card, index) => (
        <button
          className={
            selected && selectedItems.indexOf(index) !== -1
              ? "button1 active"
              : "button1"
          }
          onClick={handleButtonClick}
          id={index}
        >
          {card}
        </button>
      ))}
    </div>
  );
}

沙箱鏈接：https ://codesandbox.io/s/patient-thunder-mb1vx?file=/ src/App.js

Answer 5

使用Array#splice<\/code>的選項使用setState<\/code>的函數形式：

const [items, setItems] = React.useState([]);
const deleteItemAtIndex = (index) => setItems(items => {
  const newItems = [...items];
  newItems.splice(index, 1);
  return newItems;
});

Answer 6

我覺得奇怪的是沒有發布簡單的標准答案：

function handleButtonClick(event) {
    setSelected(true);
    const key = parseInt(event.target.id, 10);
    setSelectedItems(selectedItems => {
        const itemIndex = selectedItems.indexOf(key);
        if (itemIndex === -1) {
            // New item, add it
            selectedItems = [...selectedItems, key];
        } else {
            // New item, add it
            selectedItems = selectedItems.filter((_, index) => index !== itemIndex); // ***
        }
        return selectedItems;
    });
}