我正在嘗試顯示 showUserInfo 的結果以顯示在頁面上。我該怎么做呢？我想知道我是否需要在代碼的回傳部分中創建一些東西，或者它是否是其他東西？
import React, { useState } from "react";
import axios from "axios";
export default function App() {
const [counter, setCounter] = useState(0);
const [jsonData, setJsonData] = useState(""); // response
const [userInfos, setUserInfos] = useState([]);
const getAPI = () => {
axios.get('https://randomuser.me/api')
.then(function ({ data }) {
// handle success
// console.log({ data });
const stringifiedData = JSON.stringify(data);
setJsonData(stringifiedData);
showUserInfo(data);
console.log(data);
})
.catch(function (error) {
// handle error
console.log(error);
})
}
const showUserInfo = ({ results }) => {
const {0: { name }} = results;
const {first, last} = name;
return (<div>`${first} {last}` </div>)
}
return (
<div className="App">
<button onClick={getAPI}>Get API</button>
{userInfos}
</div>
);
}```
uj5u.com熱心網友回復：
我認為這就是你所需要的。
你可以在這里查看，我只是做了類似的東西，你可以通過一些調整來修改它。
獲取用戶資訊的按鈕
這是我正在測驗的代碼：
import "./styles.css";
import { useState, useEffect } from "react";
import axios from "axios";
let url = "https://randomuser.me/api";
export default function App() {
const [counter, setCounter] = useState(0);
const [userInfos, setUserInfos] = useState([]);
const [jsonData, setJsonData] = useState("");
const [userName, setUserName] = useState({});
useEffect(() => {
axios
.get(url)
.then((res) => {
const stringifiedData = JSON.stringify(res.data);
setJsonData(stringifiedData);
})
.catch((err) => console.log(err));
});
const updateUserInfo = () => {
const data = JSON.parse(jsonData);
const fullName = data.results[0].name;
setUserName(fullName);
};
return (
<div className="App">
<button onClick={updateUserInfo}>Click to Update</button>
<div className="user">
{userName.first} {userName.last}
</div>
</div>
);
}
我們useEffect首先用來獲取你需要的 JSON，然后我用setJsonData你的 setState 來為它設定狀態。但是在 中updateUserInfo，你需要將 jsonData 決議回來，這樣我們才能正常使用它，因為當我們通過時useEffect我們已經使用stringify了 ，所以它只是一個字串，而不是像我們決議完成時那樣的物件，那么它會變得更容易，它將具有這樣的結構，例如：{title: "Mr", first: "Kadir", last: "Balaban"}. 我創建了另外 1 個狀態userName來測驗它。你可以試試看。
React的{userName.first} {userName.last}第一次渲染會有undefined值，所以 React 理解它并且不會渲染，所以每當我們點擊按鈕時，我們設定fullName，然后我們呼叫fullName.firstand fullName.last，它會更新狀態并將這些值渲染到螢屏上，因為現在React 明白它不再是undefined了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410580.html
標籤：
上一篇：減速器調度推送問題
下一篇：了解背景關系和陣列型別