我想顯示axiosInstance.get. 我得到了回復，但沒有顯示。你能幫我找到解決辦法嗎？
export default function Tour() {
const { slug } = useParams();
const classes = useStyles();
const [data, setData] = useState({ tours: [] });
useEffect(() => {
axiosInstance.get('tours/?slug=' slug).then((res) => {
const singleTour = res.data
setData({ tours: singleTour });
console.log(res.data);
});
}, [setData]);
return (
<Container component="main" maxWidth="md">
<CssBaseline />
<div className={classes.paper}></div>
<div className={classes.heroContent}>
<Container maxWidth="sm">
<Typography
component="h1"
variant="h2"
align="center"
color="textPrimary"
gutterBottom
>
{data.tours.title}
</Typography>
<Typography
variant="h5"
align="center"
color="textSecondary"
paragraph
>
{data.tours.description}
</Typography>
</Container>
</div>
</Container>
);
}
網路沒有錯誤，但前端什么也沒有顯示
console.log(res.data) 的輸出
0:
author: 1
description: "yoga yoga yoga yoga yoga"
end_date: "2022-01-15T14:25:31Z"
id: 1
reg_end_date: "2022-01-15T14:25:36Z"
reg_start_date: "2022-01-15T14:25:33Z"
slug: "tour"
start_date: "2022-01-15T14:25:30Z"
status: 2
title: "new yoga tour"
uj5u.com熱心網友回復：
如果回應始終是長度為 1 的陣列，那么我就不會費心將它作為陣列存盤在狀態中。將其存盤為一個物件，該物件匹配它在渲染中的訪問方式并保持狀態不變。
export default function Tour() {
...
const [data, setData] = useState({ tours: {} }); // <-- use object
useEffect(() => {
axiosInstance.get('tours/?slug=' slug).then((res) => {
const [singleTour] = res.data; // <-- array destructuring assignment
setData({ tours: singleTour });
console.log(res.data);
});
}, [setData]);
return (
<Container component="main" maxWidth="md">
...
<Container maxWidth="sm">
<Typography ... >
{data.tours.title}
</Typography>
<Typography ... >
{data.tours.description}
</Typography>
</Container>
</div>
</Container>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415576.html
標籤：
下一篇：選擇值更改時組件道具不更改