反应：异步和等待不使用提取

Question

我在 Node 服务器上有 API 在调用时返回 JSON 这样的：

{"result":[{"ProductID":1,"ProductName":"iPhone10","ProductDescription":"Latest smartphone from Apple","ProductQuantity":100}]}

我正在尝试使用 fetch API 和 React 向用户显示所有这些信息，但无论我调用什么 returns undefined。这是我的 React 代码：

const [products, setProducts] = useState({})

async function getProducts() {
    await fetch(`http://127.0.0.1:5000/listProducts`)
    .then(response => response.json())
    .then(response=>{
      setProducts({products:response.result})
      console.log(response.result);
      products.map(products =>
        <h1>{products.ProductName}</h1>
        <h1>{products.ProductDescription}</h1>
        )
    })
    .catch(err=>console.error(err))
  }

函数 getProducts() 在加载页面时被调用一次。我做错了什么？提前致谢。

Answer 1

您不能将 async await 与 .then() 一起使用，您只能使用 async await 或 .then()

Answer 2

试试这个...


 const [products, setProducts] = useState({})

  React.useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://127.0.0.1:5000/listProducts')

        // console log here to determine how to set products
      console.log(result)
      setProducts(result)
    }

    fetchData()
  }, [])

  React.useEffect(() => {
   if (!!products) {
     // here you could access products!
    }
  }, [products])

  if (!products) return null

  return products.map((product) => (
    <>
      <h1>{products.ProductName}</h1>
      <h1>{products.ProductDescription}</h1>
    </>
  ))

Answer 3

你的函数做错了:

名称应该是 getAndSetProducts 甚至 setProducts / initProducts 因为它 return 是 Promise<void> 因为你实际上 return 任何东西；
你在 products 中设置了一个对象 { products: Product[] }，我认为你只需要 Product[]（产品数组），否则你必须通过 [= =18=];
地图没用，因为你没有对地图响应做任何事情，再加上地图中的变量products覆盖了导入的地图（以后可能会导致一些错误）。

尝试做：

const [products, setProducts] = useState([]); // Array instead of object

async function initProducts() {
    await fetch(`http://127.0.0.1:5000/listProducts`)
        .then(response => response.json())
        .then(response => {
            setProducts(response.result);
            console.log(response.result);
        )
        .catch(err => console.error(err));
}

function getProductsHtml() {
    return products.map(product =>
        <h1>{product.ProductName}</h1>
        <h1>{product.ProductDescription}</h1>
    );
}

您可以在组件初始化时调用 initProducts 并在您的 jsx 渲染中调用 return getProductsHtml。

反应：异步和等待不使用提取

React: async and await not working with fetch

javascript

json

reactjs

fetch-api