如何解决反应useState无法更新状态
我正在用电影应用程序训练React Hooks,现在遇到了问题。当我单击Header
组件中的按钮时,应该通过清理itemsList
数组来改变状态。该代码实际上是为Load More
按钮准备的,当API请求与其他组件一起使用(尚不存在)时,该按钮将向该数组添加更多项。
问题是该数组没有被清理,当某些按钮被单击时,来自que API Request的项目被添加到其中。
这是App.js文件
import React,{ useState } from "react";
import axios from "axios";
import Header from "./Containers/Header";
export default function App() {
const [values,setValues] = useState({
msdb: "API_CODE",page: 1,totalPages: 0,listType: "popular",mode: "movie",itemsList: [],searchFiled: "",loading: false,error: false
});
const { msdb,page,totalPages,listType,mode,itemsList,searchFiled,loading,error } = values;
const modeSelection = (event) => {
let modeType = "";
let selectedMode = event.target.innerText;
console.log(selectedMode);
if (selectedMode === "Movies") {
modeType = "movie";
} else if (selectedMode === "Series") {
modeType = "tv";
}
setValues((prevValues) => {
return { ...prevValues,mode: modeType,itemsList: [] };
});
let endPoint = `https://api.themoviedb.org/3/${mode}/${listType}?api_key=${msdb}&page=${page}`;
fetchItems(endPoint);
};
const fetchItems = (endPoint) => {
axios
.get(endPoint)
.then((response) => {
const newItemsList = [...itemsList];
const newItems = response.data.results;
if (newItems) {
setValues((prevValues) => {
return {
...prevValues,page: response.data.page,itemsList: [...newItemsList,...newItems],totalPages: response.data.total_pages
};
});
}
})
.catch((error) => {
setValues({ ...values,error: true });
console.log(error);
});
};
return (
<div className="App">
<Header mode={modeSelection} />
</div>
);
}
这是Header.js文件
import React from "react";
import "./Header.css";
import { NavLink } from "react-router-dom";
export default function Header(props) {
return (
<div>
<div className="top-center">
<NavLink to="/movies" onClick={props.mode} className="ch-button">
Movies
</NavLink>
<NavLink to="/series" onClick={props.mode} className="ch-button">
Series
</NavLink>
</div>
</div>
);
}
所以我想要的结果是,当单击Header组件按钮时,应该清除itemsList数组,并且API请求将再次填充它。请记住,axios方法已经为另一个组件中的“加载更多按钮”做好了准备,在这种情况下,它将为数组添加更多项。某个地方应该有useEffect吗? 谢谢
解决方法
问题与setState的异步性质有关。您可以正确地使用prevState来设置一个新项,但是在设置新项时在“ fetchItems”中,您会从当前状态而不是prevState中获得旧项。这样,当您使用状态来设置新项目时,状态尚未用空数组更新。你可以尝试
if (newItems) {
setValues((prevValues) => {
return {
...prevValues,page: response.data.page,itemsList: [...prevState.itemsList,...newItems],loading: false,totalPages: response.data.total_pages
};
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。