如何在反应js中将对象添加到具有钩子状态的数组中

Question

我正在尝试根据单击的按钮的id属性设置状态对象的id属性，然后将其附加到状态数组中，然后将其存储在本地存储中。 但是我的代码中发生了一些奇怪的事情：

1. 当我单击第一个按钮时， console.log显示第一个按钮 (5) 的id值，但状态对象仍然为空

2. 然后我点击第二个按钮， console.log显示第二个按钮 (12) 的id值，但状态对象现在包含第一个按钮 (5) 的值

3. 然后我调用了第三个按钮， console.log显示第三个按钮的id值（100），但状态对象包含第二个按钮的值（12）

4. 即使我已经添加了react-bootstrap依赖项、导入了Button组件并在 Button 中应用了variant="link" ，为什么Button仍然看起来像常规/默认Button ？

这是我的代码（和代码框）

import { useState, useEffect } from "react";
import { Button } from "react-bootstrap";

export default function App() {
  const [cartList, setCartList] = useState([]);
  const [cartItem, setCartItem] = useState({});

  useEffect(() => {
    let localCart = localStorage.getItem("cartList") || "[]";
    console.log("localcart", localCart);
    if (localCart) {
      localCart = JSON.parse(localCart);
    }
    setCartList(localCart);
  }, []);

  const handleClick = (e, item) => {
    e.preventDefault();

    const arr = e.target.id.split("-");
    const selectID = arr[1];
    console.log("selectID", selectID);
    setCartItem({ ...cartItem, id: selectID });
    console.log("cartItem", cartItem);

    let itemIndex = -1;
    console.log("cartlist", cartList);
    for (let i = 0; i < cartList.length; i++) {
      if (cartItem && selectID === cartList[i].id) {
        itemIndex = i;
      }
    }
    if (itemIndex < 0) {
      console.log("added to cartList on index", itemIndex, cartItem);
      setCartList([...cartList, cartItem]);
      localStorage.setItem("cartList", JSON.stringify(cartList));
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Button
        variant="link"
        id="item-5"
        onClick={(e) => handleClick(e, cartItem)}
      >
        item no.5
      </Button>
      <Button
        variant="link"
        id="item-12"
        onClick={(e) => handleClick(e, cartItem)}
      >
        item no.12
      </Button>
      <Button
        variant="link"
        id="item-100"
        onClick={(e) => handleClick(e, cartItem)}
      >
        item no.100
      </Button>

      <div>
        {cartList.length > 0 ? (
          cartList.map((item, index) => <div key={index}>{item.id}</div>)
        ) : (
          <div>there is no data here</div>
        )}
      </div>
    </div>
  );
}

Answer 1

问题编号1 、 2 、 3都是由相同的原因引起的： setCartItem异步工作，所以当你这样做时：

setCartItem({ ...cartItem, id: selectID });
console.log("cartItem", cartItem);

您在console.log中打印的值仍然是旧状态，因为它不会等待setCartItem完成更新。 因此，如果您想在每次更改时对新状态进行console.log ，您可以使用useEffect挂钩：

useEffect(() => {
 console.log("cartItem", cartItem); // this will be executed each time the cartItem has been changed
}, [cartItem])

关于第4 个问题，请确保导入 bootstrap css 文件：

/* The following line can be included in your src/index.js or App.js file*/

import 'bootstrap/dist/css/bootstrap.min.css';

更多信息在官方网站： https ://react-bootstrap.github.io/getting-started/introduction/#stylesheets