在 react 中设置"加载"布尔值的状态不会更新

Question

我有一个页面，允许用户提交一个从中抓取数据的url。随后向用户呈现过滤后的数据。

因为刮擦需要一些时间，所以我想实现一个加载器。虽然loader类(希望(是相对直接的，但它是我遇到问题的loading的状态。状态本身从不更新。尽管其他状态值是诸如CCD_ 2。

Body.js

const [searchState, setSearchState] = useState({
searchCriteria: "https://en.wikipedia.org/wiki/2020_Central_Vietnam_floods",
headers:[],
references: []
});
const [filterState, setFilters] = useState({
languageFilter: ""
});
const [loadingState, setLoadingState] = useState({
loading: false
});

以上内容都通过上下文传递到Search中

<>
<SearchContext.Provider value={{searchState, setSearchState,filterState, setFilters, loadingState, setLoadingState}} >
<Search />
<DonateButton />
<WikiHeaderGroup />
</SearchContext.Provider>
</>

然后在Search组件中有一个handleSubmit。

搜索.js

import React, {useContext} from "react";
import {SearchContext} from "../../contexts/SearchContext"
import "../../App.css"
export function Search (){
const {searchState, setSearchState, filterState, setFilters, loadingState, setLoadingState} = useContext(SearchContext);
const handleSubmit = (event) => {
setFilters({languageFilter:""})
setLoadingState({loading:true})
console.log("Loading State : " + loadingState.loading)
event.preventDefault();
event.persist();            //persists the event object into the function
const fetchReferences = async () => {
fetch('http://127.0.0.1:8080/search/', {
method: 'POST',
body: JSON.stringify({
url: searchState.searchCriteria
}),
headers: {"Content-type": "application/json; charset=UTF-8"}
}).then(response => {
console.log(response)
return response.json()
}).then(json => {
console.log(json)
setSearchState({
headers:json.headers,
references:json.references
})
setLoadingState({loading:false})
console.log("Loading State : " + loadingState.loading)
});}
fetchReferences();
}
return (
<div className="search container">
<div className="input-group input-group-sm mb-3 center">
<div className="input-group-prepend">
<span className="input-group-text" id="inputGroup-sizing-sm">Wikipedia URL:</span>
</div>
<form onSubmit={(event) => handleSubmit(event)}>
<input
type="text"
id="searchBox"
className="form-control center"
aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
value={searchState.searchCriteria}
onChange={(event) => setSearchState({searchCriteria:event.target.value, resultId:0})}
placeholder="Add a url" />
</form>
</div>
</div>
);
}
export default Search;

Answer 1

不要将对象用于布尔值，只使用

const [loadingState, setLoadingState] = useState(false);
....
setLoadingState(true)

btw看起来像是一个闭包问题。您看到loadingState总是false导致关闭。看看这个使用React Hooks 时要注意陈旧的关闭

一种解决方法是使用refs

const loadingStateRef = useRef(loadingState);
//then inside the function u can access 
latestValue.current