React useState未更新状态
React useState未更新状态
提问于 2020-09-29 17:06:03
我正在用一个电影应用程序训练React Hooks，现在我遇到了一个问题。当我单击Header组件中的按钮时，应该会通过清除itemsList数组来更改状态。代码实际上是为一个Load More按钮准备的，当API请求与其他组件(尚未出现)一起使用时，该按钮将向此数组中添加更多项。问题是该数组未被清理，当某个按钮被单击时，que API请求中的项被添加到该数组中。
这是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],
loading: false,
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方法已经为另一个组件中的Load More Button做好了准备，在本例中，它将向数组中添加更多项。什么地方应该有一个useEffect？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-29 17:59:52
这个问题与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
};
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64116312
复制相关文章
相似问题
腾讯云开发者
