如何设置已经在我的假数据中的对象的useState初始值？

Question

我被宣布为一个名为：

的州

const [quantity,setQuantity] = useState(products.qty)

我需要 products.qty 将是我的初始状态值，但它显示未定义。

下面我附上了我的假数据对象：

products =[{
      "user":"tareque@gmail.com",
      "name": "Mathis England",
       "img":   "https://i.ibb.co/C8JtD0Z/bicycle-1.png",
       "description": "Lorem ipsum dolor sit amet consectetur",
       "price": 300,
       "qty": 20,
       "supplier": "Velocy"
     
}
]

Answer 1

我认为这应该可以回答您关于模拟静态数据的问题。根据您的示例，数组只有一个对象。

import React, { useState } from "react";
const products = [
  {
    user: "tareque@gmail.com",
    name: "Mathis England",
    img: "https://i.ibb.co/C8JtD0Z/bicycle-1.png",
    description: "Lorem ipsum dolor sit amet consectetur",
    price: 300,
    qty: 20,
    supplier: "Velocy",
  },
];
const Demo = () => {
  const [quantity, setQuantity] = useState(products[0].qty);

  return <h1>{quantity}</h1>;
};

export default Demo;

否则，如果您想将状态设置为动态数据，那么您应该使用 useEffect 钩子作为副作用来设置组件安装后的状态。

Answer 2

此代码有效，您可以在控制台和 h1 中看到值

import { useEffect, useState } from "react";
import { products } from "./products";

export default function App() {
const [quantity, setQuantity] = useState(products[0].qty);

  useEffect(() => {
    console.log("qty = ", quantity);
  }, []);

  return (
    <div className="App">
      <h1>{quantity}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

你的数据源文件products.js

export const products = [
  {
    user: "tareque@gmail.com",
    name: "Mathis England",
    img: "https://i.ibb.co/C8JtD0Z/bicycle-1.png",
    description: "Lorem ipsum dolor sit amet consectetur",
    price: 300,
    qty: 20,
    supplier: "Velocy"
  }
];

https://codesandbox.io/s/blue-violet-bfg2h8?file=/src/App.js

如何设置已经在我的假数据中的对象的useState初始值？

How to set useState initial value of object which is already in my fake data?

object

undefined

reactjs

use-state