如何解决ReactJS-使用useState挂钩维护数值
我对React还是很陌生。
我的应用程序中有一些过滤器,距离和等级。
我想知道显示应用于用户的过滤器的数量。
我使用创建了组件级别状态
const [rating,setRating] = useState([])
const [distance,setDistance] = useState(0)
const [filters,setFitlers] = useState([])
异步API调用发生在pageLoad上。
我尝试通过添加过滤器,距离和等级的依赖项来使用useEffect():
useEffect(() => {
// distance filter is mandatory
if (!filters.includes('distance')) {
setFilters([...filters,'distance'])
}
if (rating.length > 0) {
if (!filters.includes('rating')) {
setFilters([...filters,'distance'])
}
} else {
setFilters(filters.filter((f) => f !== 'rating'))
}
},[filters,distance,rating])
但是,一旦未选择任何等级,我就会收到一个React警告:超过最大更新深度。
如何安全地保持过滤器数量?
解决方法
您是:
- 两次添加
distance
([...filters,'distance']
)。 - 可能会关闭状态
filters
。 - 您在
filters.includes("rating") === true
上有一个无限循环,您的逻辑总是选择此路径并更新状态。
尝试类似的东西:
useEffect(() => {
if (!filters.includes("distance")) {
setFilters((filters) => [...filters,"distance"]);
}
if (rating.length > 0) {
if (!filters.includes("rating")) {
setFilters((filters) => [...filters,"rating"]);
}
} else {
setFilters((filters) => {
const filtered = filters.filter((f) => f !== "rating");
return filtered.length === filters.length ? filters : filtered;
});
}
},[filters,distance,rating]);
,
您将收到错误超出最大更新深度,因为在useEffect上添加“过滤器”依赖项将导致无限渲染。只要“过滤器”状态发生变化,并且在执行setFilters()的useEffect内部,useEffect就会运行,这会导致useEffect一次又一次地运行。
,您收到的错误Maximum update depth exceeded
是由无限循环/无限重新渲染引起的。
由于您在filters
的依赖项中添加了UseEffect
,并且您在其中设置了带有setFilters
的过滤器值,因此useEffect
将执行无数次。
我真的不明白为什么您只在没有选择等级的情况下才会收到此错误。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。