我的 useEffect() 有什么问题？它return空对象

Question

我正在尝试从我的服务器获取数据，我已经使用 Postman 测试了数据获取，一切正常。我还仔细检查了我的 API 路径是否错误，也不是问题所在。

我把useEffect改成了useLayoutEffect，也没有运气。我在 useEffect 挂钩之外创建了一个单独的函数，也没有工作。我在每一行都创建了 console.log("I was here")，其中每个日志都在 fetchProduct 函数中成功打印。

现在我被困住了。我怀疑效果会在承诺 returns 之前完成。提前谢谢你。

ProductDetail 组件

import React, { useEffect, useState } from "react"
import EcommerceLayoutsTypeFourteenth from "../layouts/Ecommerce/EcommerceLayoutsTypeFourteenth/EcommerceLayoutsTypeFourteenth"
import EcommerceLayoutsTypeSecond from "../layouts/Ecommerce/EcommerceLayoutsTypeSecond/EcommerceLayoutsTypeSecond"
import axios from "axios"

const ProductDetail = ({ match, products }) => {
  const [product, setProduct] = useState({})

  useEffect(() => {
    const fetchProduct = async () => {
      const response = await axios.get(`/api/products/${match.params.id}`)
      setProduct(response.data)
    }
    fetchProduct()
  }, [match])

  return (
    <>
      <EcommerceLayoutsTypeSecond product={product} />
      <EcommerceLayoutsTypeFourteenth products={products} />
    </>
  )
}

export default ProductDetail

这是我的App.js

import React, { useState, useEffect } from "react"

import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import Container from "reactstrap/lib/Container"
import FootersLayoutsTypeEighth from "./layouts/FootersLayouts/FootersLayoutsTypeEighth/FootersLayoutsTypeEighth"
import Header from "./layouts/HeaderLayouts/Header.js"
import HomeScreen from "./screens/HomeScreen"
import ProductDetail from "./screens/ProductDetail"
import axios from "axios"

const App = () => {
  const [products, setProducts] = useState([])

  useEffect(() => {
    const fetchProducts = async () => {
      const response = await axios.get("/api/products/")
      setProducts(response.data)
    }
    fetchProducts()
  }, [])

  return (
    <Router>
      <Container>
        <Header dark={false} />
      </Container>
      <Switch>
        <Route
          exact
          path="/"
          render={(props) => <HomeScreen {...props} products={products} />}
        />
        <Route
          path="/products/:id"
          render={(props) => <ProductDetail {...props} products={products} />}
        />
      </Switch>
      <FootersLayoutsTypeEighth />
    </Router>
  )
}

export default App

Answer 1

尝试像这样将其包装在匿名异步函数中

useEffect(() => {
    (async () => {
        const response = await axios.get("/api/products/")
        const json = await response.json()
        setProducts(json)
    })()
}, [])

此外，请记住，无论何时创建“异步”函数，都需要解析 promise。所以如果你的函数是这样构造的

const fetchProduct = async () => {
  const response = await axios.get(`/api/products/${match.params.id}`)
  const json = await response.json()
  return json;
}

你需要这样解决

fetchProduct.then((data) => // do something)

或者你可以像这样在匿名异步函数下解决它

const data = await fetchProduct()

Answer 2

你为什么不这样设置产品：

await axios.get(`/api/products/${match.params.id}`).then((res) => setProduct(res.data));

一个 async/await 函数 return 一个 Promise，因此当从外部响应设置产品时，您可能无法获得产品。

Answer 3

在对象 got 和类别数组中，它看起来像这样..

    const products = [{
    _id: 1,
    title: "GP Base Coat",
    description:
      "FLINKEN® Based Coat mortar is produced according to the requirement of BS EN 998-1; incorporating standardized binder, well graded silica sand, water retention ability additve for all types of brick and block rendering.",
    price: "40.00",
    poster: "./image/flinken-product-01.png",
    category: "gp-series",
    link: "/products/1",
    features: [
      "feature 1",
      "feature 2",
      "feature 3",
      "feature 4",
      "feature 5",
      "feature 6",
    ],
    rating: 4.5,
  },...]

所以每次我调用 products.features[0] 我的产品状态中的数据都会变成空对象..所以这里的解决方案我只是分别为功能和产品创建状态..

  const [product, setProduct] = useState({})
  const [feature, setFeature] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get(`/api/products/${id}`)
      setFeature(data.features)
      setProduct(data)
    }
    fetchData()
  }, [id])

感谢上周所有付出时间和精力帮助我的人，我真的很感谢你们！

我的 useEffect() 有什么问题？它return空对象

What is wrong with my useEffect()? It return empty object

reactjs

axios

use-effect

use-state