无法在反应状态下设置 JSON 数据

Question

所以我试图将一个 JSON 对象设置为一个状态，但它不断地给出一个空对象。不知道为什么。

import React, {useState} from 'react'

const MainApp = () => {

    const [products, setProducts] = useState({})
    const url = "http://localhost:5000/products"

    fetch(url)
        .then(res => res.json())
        .then(res => setProducts(res))
        .catch(err => { console.log(err) })
         
        console.log(products) //this gives an empty object

}

export default MainApp  

这是 http://localhost:5000/products 中的输出

[
  {
    "id": "trYl7JYATH0",
    "description": "Test caption",
    "imgThumb": "test.jpg",
    "img": "test.jpg",
    "link": "test.jpg",
    "userId": "X0ygkSu4Sxo",
    "userName": "user",
    "userLink": "https://unsplash.com/@user",
    "tags": [
      "building",
      "architecture",
      "corner",
      "black",
      "dark",
      "balcony",
      "night"
    ]
  }
]

Answer 1

您不应该在主函数中发出网络请求。 React 提供了一个钩子，叫做useEffect。

import React, {
  useState,
  useEffect
} from 'react';

const MainApp = () => {

  const [products, setProducts] = useState([]) //API returning array
  const url = "http://localhost:5000/products"

  useEffect(() => {
    // Update the document title using the browser API
    fetch(url)
      .then(res => res.json())
      .then(res => setProducts(res))
      .catch(err => {
        console.log(err)
      })
  }, []); //This function will run at the last, when all componenets rendered in browser
}

ReactDOM.render( <
  MainApp / > ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>