使用选项链值作为初始计数时，反应 useState() 挂钩 returns 未定义

Question

当我在 useState() 挂钩中使用 totalQuantity 时，它 returns 未定义。但是，如果我在 useState() 挂钩内分配 totalQuantity = 100、totalQuantity = 200 等，它会显示数字。那么，为什么每当我为 totalQuantity 分配选项链接值作为初始计数时，都会使用 useState(totalQuantity) returns undefined ？这是代码：

  const inventories = useInventory();
  const { inventoryId } = useParams();
  const selectedInventory = inventories.find(
    (inventory) => inventory._id === inventoryId
  );
  const totalQuantity = selectedInventory?.quantity;
  console.log(totalQuantity);
  const [carQuantity, setCarQuantity] = useState(totalQuantity);
  const quantityDecreaser = () => {
    if (carQuantity > 0) {
      setCarQuantity(carQuantity - 1);
      const remainingQuantity = carQuantity - 1;
      const data = { remainingQuantity };
      fetch(`http://localhost:5000/inventories/${inventoryId}`, {
        method: "PUT",
        headers: {
          "content-type": "application/json",
        },
        body: JSON.stringify(data),
      })
        .then((res) => res.json())
        .then((result) => {
          console.log(result);
        });
    }
  };```

Answer 1

您的 selectedInventory 似乎返回了 undefined，

也是

  const totalQuantity = selectedInventory?.quantity;

这可能是由于 inventoryId 错误或不存在造成的。

检查selectedInventory是否有正确的数据，你也可以在这里使用默认值：

  const [carQuantity, setCarQuantity] = useState(totalQuantity || defaultValue);

Answer 2

也许你的查找方法return未定义因此状态未定义

const get = (data) => {
        const inventoryId = 8;
        const selectedInventory = data.find(
            inventory => inventory.id === inventoryId
        );
        return selectedInventory;
    }
    const totalQuantity = get([{id: 4,quantity:888 }, {id: 8, quantity:88 }, {id: 9, quantity:787}]);
    const [carQuantity, setCarQuantity] = React.useState(totalQuantity);

    console.log(carQuantity);

Answer 3

这可能是类型问题，因为您正在使用 === 检查相等性，如果您的 inventory._id 是一个数字，因为 useParams 钩子将 return 一个字符串。

使用双等号仅检查值inventory._id == inventoryId

或

像这样用加号 + 将 inventoryId 解析为数字 inventory._id === +inventoryId

Answer 4

我使用 useEffect() 修复了它。也许 setCarQuantity() 未能立即设置值，在使用 useEffect() 后它会监听状态变化。

const [carQuantity, setCarQuantity] = useState(totalQuantity);
  useEffect(() => {
    setCarQuantity(totalQuantity);
  }, [totalQuantity]);

使用选项链值作为初始计数时，反应 useState() 挂钩 returns 未定义

React useState() hook returns undefined when using option chained value as initial count

undefined

reactjs

optional-chaining

react-hooks

use-state

或