如何从API获取数据并将其显示为前端的原始数据?

Question

好吧，这么久了我确实有反应。我的问题很简单，我只是不知道怎么做。基本上我是从一个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子对象(find: object with key {id, title, description, price, discountPercentage, rating, stock, brand, category, thumbnail, images})。如果您打算呈现子集合，请使用数组代替

Answer 1

Stringify您的JSON数据<pre>{JSON.stringify(data)}</pre>或检查这个线程如何漂亮打印JSON与React

Answer 2

可以使用JSON.stringify对值进行字符串化，使用pre标记对值进行美化。如下:

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>
<pre>{JSON.stringify(info)}</pre>
<button onClick={getData}>click me</button>
</div>
)
}
export default App;

Answer 3

问题是JSON不能直接显示。这就是错误提示:

Objects are not valid as a React child (found: object with keys {id, title, description, price, discountPercentage, rating, stock, brand, category, thumbnail, images}). If you meant to render a collection of children, use an array instead

您可以将info字符串化以将其视为一个整体:

const App = () => {
const [info, setInfo] = React.useState([]);
const getData = () => {
fetch("https://dummyjson.com/products/")
.then((res) => res.json())
.then((data) => {
setInfo(data.products);
});
};

return (
<div>
{JSON.stringify(info)}
<button onClick={getData}>click me</button>
</div>
);
};
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>