在API中发送分页值时出现问题

Question

我使用的是material-UI分页我在API中发送页码意味着我根据页码获取数据第一次正常运行时发生的情况，但当我单击2或其他数字时，它不使用相同的数字，它在第一次使用前一个数字，然后再次单击2，它将在API单击中使用2，但当我们控制数据时coming在这个控制台中意味着coming数据属性console.log("page", page)但在API功能控制台中
console.log("page1", page)取前一个号码并在API调用中发送相同的号码

const [page, setPage] = useState(1);
const handleChange = (event, value) => {
setPage(value);
};
console.log("page",page)
const pageChange = () => {
console.log("page1",page)
axios
.get(
`${DJANGO_SERVER_ADDRESS}/file/?screen=first&ID=${uploadData.ID}&page=${page}`
)
.then(
(res) => {
console.log("csv", res.data);
setCsvdata(res.data);
},
(err) => {}
);
};

<p>{page}</p>
<Box  mb={2} ml={20} mr={5} pl={20} pr={5}>
<Pagination
onClick={(e) => {
pageChange();
}}
count={10}
page={page}
onChange={handleChange}
variant="outlined"
/>
</Box>

Answer 1

您正在进行状态更新之前的调用。您可以尝试使用useEffect调用API

useEffect(()=>{
console.log("page1",page)
axios
.get(
`${DJANGO_SERVER_ADDRESS}/file/?screen=first&ID=${uploadData.ID}&page=${page}`
)
.then(
(res) => {
console.log("csv", res.data);
setCsvdata(res.data);
},
(err) => {}
);
},[page]);