Question

当我尝试显示产品时，products的状态为null。我知道要处理此问题，我们可以再次使用useEffect来显示产品，但product状态仍然为null。这是我尝试尝试的部分代码。

function Product() {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:4000/products")
      .then((res) => setProducts(res.data));
  }, []);

  useEffect(() => {
   console.log(products); // Here still products is null
    products.map((product) => (
      <tr key={product.id}>
        <td>{product.productName}</td>
        <td>{product.productDesc}</td>
        <td>{product.manufacturer}</td>
        <td>{product.price}</td>
        <td>{product.quantity}</td>
      </tr>
    ));
  }, [products]);

  return <></>;
}

如果我删除了products.map，那么它将显示为两个值，第一个是null，第二个是array of the object（即我的数据）。

Answer 1

现在，由于返回为空（几乎），因此不会呈现任何内容。

尝试

function Product() {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:4000/products")
      .then((res) => setProducts(res.data));
  }, []);

 if (!products) {
    return null;
 }

 return products.map(product => (
    <tr key={product.id}>
        <td>{product.productName}</td>
        <td>{product.productDesc}</td>
        <td>{product.manufacturer}</td>
        <td>{product.price}</td>
        <td>{product.quantity}</td>
    </tr>
 ));
}

Answer 2

这是一个典型的 lifting the state up 到 React.js 中高阶组件的例子。所有状态和 API 调用都需要在您的顶级组件中编写。

import ProductItem from "./ProductItem";

function Product(){
  const [products, setProducts] = useState(null);

  useEffect(() => {
    axios
      .get("http://localhost:4000/products")
      .then((res) => setProducts(res.data));
  }, []);

return(
     <table>
       <thead>
          <th>Name</th>
          <th>Description</th>
          <th>Manufacturer</th>
          <th>Price</th>
          <th>Qunatity</th>
       </thead>
       <tbody>
          <ProductItem products={products} />
       </thead>
     </table>
 );
}

此处，products 状态作为道具传递给 ProductItem。现在 ProductItem 组件将拥有可以作为道具访问的产品项目列表。

function ProductItem({products}) {

  useEffect(() => {
   console.log(products); // getting the list of the product in the developer console,
  }, [products]);

  return (
    <>
     {products.map((product) => (
      <tr key={product.id}>
        <td>{product.productName}</td>
        <td>{product.productDesc}</td>
        <td>{product.manufacturer}</td>
        <td>{product.price}</td>
        <td>{product.quantity}</td>
      </tr>
      ))}
   </>;
 );
}
export default ProductItem;

如何在React钩子中处理useState异步（以我为例）

2 个答案: