在反应中使用useState方法从数组中删除以前的对象

Question

我的代码

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const MAX_QUANTITY = 10;
  const MIN_QUANTITY = 0;
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([{ id: 0 }]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: count + 1
      }
    ]);
    console.log(items);
  };

  const minusItem = () => {
    setItems([{ id: 0 }])

    console.log(items);
  }

  function add() {
    if (count < MAX_QUANTITY) {
      setCount(count + 1);
      addItem();
    }
  }

  function minus() {
    if (count > MIN_QUANTITY) {
      setCount(count - 1);
      minusItem()
    }
  }

  return (
    <div className="App">
      <h1>{count}</h1>
      <button onClick={add}>+</button>
      <button onClick={minus}>-</button>
    </div>
  );
}

我的问题是，虽然我可以始终如一地将一个项目添加到我的项目数组中，但我无法在单击“-”按钮时删除之前添加的项目。作为测试，我设置 'minusItem' 函数将数组设置回其初始状态，但您会注意到在按下“-”按钮后，另一个对象在设置之前添加到数组中，这是为什么？

我只是想在按下“+”或“-”按钮时向数组添加和减去项目。非常感谢有关如何执行此操作的任何建议。

const {useState} = React;

function App() {
  const MAX_QUANTITY = 10;
  const MIN_QUANTITY = 0;
  const [count, setCount] = React.useState(0);
  const [items, setItems] = React.useState([{
    id: 0
  }]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: count + 1
      }
    ]);
    console.log(items);
  };

  const minusItem = () => {
    setItems(prevItems => prevItems.slice(0, -1));

    console.log(items);
  }

  function add() {
    if (count < MAX_QUANTITY) {
      setCount(count + 1);
      addItem();
    }
  }

  function minus() {
    if (count > MIN_QUANTITY) {
      setCount(count - 1);
      minusItem()
    }
  }

  return ( <
    div className = "App" >
    <
    h1 > {
      count
    } < /h1> <
    button onClick = {
      add
    } > + < /button> <
    button onClick = {
      minus
    } > - < /button> <
    /div>
  );
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="react"></div>

counter example

Answer 1

您想从数组中删除最后一项，并将其分配给状态。我的偏好是使用 slice

  const minusItem = () => setItems(prevItems => prevItems.slice(0, -1));

在反应中使用useState方法从数组中删除以前的对象

removing previous object from array with useState method in react

javascript

reactjs

use-state