在react组件Typescript中呈现提取的API json对象

Question

我收到了来自api调用的json，并保存在状态"数据"；

我想在获取api时显示一个加载屏幕，就像我也有一个状态一样；加载"；

正在加载？然后在元素上渲染数据：正在加载。。

const App = () => {
const [data, setData] = useState([]);
const [Loading, setLoading] = useState(false);
useEffect(() => {
Fetchapi();
}, []);
const Fetchapi = async () => {
try {
await axios.get("http://localhost:8081/api").then((response) => {
const allData = response.data;
setData(allData);
});
setLoading(true);
} catch (e) {
console.log(e);
}
};

return (
<div>
i need my json object rendered here i tried map method on data and i am 
getting errors and i have my json2ts interfaces imported in this 
</div>
);
};
export default App;

Answer 1

我会camelCase您的值/函数，并将您的fetchApi移动到效果本身中，因为目前它是一个依赖项。

将setLoading(true)置于获取请求之上，因为当前它在获取完成之前不会激活。

然后在它下面放setLoading(false)，也放在你的捕获物里面。

在您的退货声明中，您现在可以添加以下内容：

<div>
{loading ? "Loading..." : JSON.stringify(data)}
</div>

编辑

评论请求的示例。

import { Clan } from "../clan.jsx"
// App
<div>
{loading ? "Loading..." : <Clan data={data}/>}
</div>
// New file clan.jsx
export const Clan = (props) => {
return (
<div>
<h1>{props.data.clan.name}</h1>
</div>
);
}

Answer 2

尝试这个

interface ResponseData {
id: string
// other data ...
}
const App = () => {
const [data, setData] = useState<ResponseData | null>(null)
const [Loading, setLoading] = useState(true)
useEffect(() => {
Fetchapi()
}, [])
const Fetchapi = async () => {
try {
setLoading(true) // USE BEFORE FETCH
await axios.get("http://localhost:8081/api").then(response => {
setLoading(false) // SET LOADING FALSE AFTER GETTING DATA
const allData: ResponseData = response.data
setData(allData)
})
} catch (e) {
setLoading(false) // ALSO SET LOADING FALSE IF ERROR
console.log(e)
}
}
if (Loading) return <p>Loading...</p>
if (data?.length)
return (
<div>
{data.map(d => (
<div key={d.id}>{d.id}</div>
))}
</div>
)
return <div>no data found</div>
}
export default App