在获取方法中，加载状态不会更改为 true

Question

我一直在尝试为我的应用程序实现加载功能。我只是将加载状态从 false 更改为初始值，然后在开始获取时更改为 true，然后在结束数据获取时更改为 false。因此，这应该显示我有条件地设置的加载元素，以便在加载为 true 时渲染。但它在我的控制台中显示.log该值始终为假。

我尝试将 setState(true( 放在不同的地方，在 onClick 函数中，但它似乎没有切换到 true。

import React, { useState } from "react";
import { LANGUAGES } from '../config/languages'
import { BASEURL, APIKEY } from '../config/gavagai'
export function Input(props) {
const [word, setWord] = useState("");
const [language, setLanguage] = useState("");
const [data, setData] = useState([])
const [loading, setLoading] = useState(false);
const url = BASEURL + '/' + language + '/' + word + '?additionalFields=SEMANTICALLY_SIMILAR_WORDS&apiKey=' + APIKEY;

const fetchData = () => {
giveWarning();
setLoading(true);
if (word && language) {
fetch(url)
.then(response => response.json())   
.then(response => setData({ status: 'loaded', payload: response }), setLoading(false))
.catch(error => setData({ status: 'error', error }))
return data;
};
}
return (
<div>
<h1>Gavagai Lexicon</h1>
<div className="row">
<label>
Type your word here
</label>
</div>
<div className="input-field col s5">
<input
type="text"
value={word}
onChange={e => setWord(e.target.value)}
/>
</div>
<div className="input-field col s3">
<select className="browser-default" value={language} onChange={e => setLanguage(e.target.value)}>
<option value="" disabled selected>Choose your language</option>
{ LANGUAGES.map((lang) => {
return(
<option value={lang.alpha2}>{lang.English}</option>
)
})}
</select>
</div>
<div className="button-space">
<button className="btn waves-effect waves-light" onClick={() => fetchData()}>Search</button>
</div>
{
loading ? <p>loading</p> : null
}
</div>
);
}

控制台.log显示它不会切换到 true。我在这里错过了什么？

Answer 1

由于闭包，fetchData只能访问单词和语言变量的初始值。

你需要使用回调(你的函数，[单词，语言](来使用这些值。

https://reactjs.org/docs/hooks-reference.html#usecallback

导出函数输入(道具( { ...

const fetchData = useCallback(
() => {
giveWarning();
setLoading(true);
if (word && language) {
fetch(url)
.then(response => response.json())   
.then(response => setData({
status: 'loaded',
payload: response
}), setLoading(false))
.catch(error => setData({ status: 'error', error }))
return data;
};
},
[word, language]
)
...