reactjs - 如何从 api 获取数据并将其作为原始数据显示在前端？

Question

好吧，我确实 react 了很久。我的问题很简单，我只是不知道该怎么做。基本上我是从一个 api 获取数据并将其放入一个状态。我基本上想显示我正在获取的数据作为原始数据，而不是映射到它上面。这就是我的意思。

这是我的组件:

 const App = () => {
 const [info, setInfo] = useState([])

 const getData = async () => {
      const res = await fetch ('https://dummyjson.com/products/')
      const data = await res.json()
      setInfo(data.products)
 }
 console.log(info)
  

 return(
   <div>
     {info}
     <button onClick={getData}>click me</button>
   </div>

   )
 }

 export default App;

基本上当我点击按钮时，我希望信息在浏览器上显示如下:

{
  "id": 1,
  "title": "iPhone 9",
  "description": "An apple mobile which is nothing like apple",
  "price": 549,
  "discountPercentage": 12.96,
  "rating": 4.69,
  "stock": 94,
  "brand": "Apple",
  "category": "smartphones",
  "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
  "images": [
    "https://i.dummyjson.com/data/products/1/1.jpg",
    "https://i.dummyjson.com/data/products/1/2.jpg",
    "https://i.dummyjson.com/data/products/1/3.jpg",
    "https://i.dummyjson.com/data/products/1/4.jpg",
    "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
  ]
}

就是这样。我只想在前端显示原始的 json 数据。但是就像我现在的代码一样，每次我单击按钮时都会出现此错误:

对象作为 React 子项无效(已找到:具有键 {id、title、description、price、discountPercentage、rating、stock、brand、category、thumbnail、images} 的对象)。如果您打算呈现子集合，请改用数组

Answer 1

将您的 JSON 数据字符串化 <pre>{JSON.stringify(data)}</pre>或 Check out this thread以及如何使用 React 漂亮地打印 JSON