在异步调用之前更新Sate的正确方法

Question

在进行异步调用时，我正在尝试更新状态以显示ActivityIndicator。

确保IsLoading(true)和setResult(null)在异步调用之前发生的正确方法是什么？

在下面的代码中，setIsLoading在异步调用之前实际上没有更新，因此ActivityIndicator不会出现在UI上。我意识到为什么会出现这种情况(这里(，我只是不知道推荐的方法来确保在异步调用之前显示ActivityIndicator。

请帮忙。在react中，正确的方法是什么？

const MyScreen = () => {
const [isLoading, setIsLoading] = useState(false);
const [result, setResult] = useState(null);
const handlePress = async () => {
setResult(null);  // reset result
setIsLoading(true);  // show activity indicator
const result = await MyAsyncFunc();  // native modules function
setResult(result);
setIsLoading(false);  // turn off activity indicator
}
return (
<View style={styles.container}>
<MyButton title="Run" handlePress={handlePress} disabled={isLoading} />
{isLoading && <ActivityIndicator size="large" color="#00ff00" />}
<Text>{result}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
})

Answer 1

您可以尝试只使用一个状态吗？我认为不需要isLoading。试试这个

{!result && <ActivityIndicator size="large" color="#00ff00" />}

编辑：让我们利用useEffect来监听isLoading是否为真

...
useEffect(() => {
async function load (){
if (isLoading) {
const result = await MyAsyncFunc();  // native modules function
setResult(result);
setIsLoading(false);  // turn off activity indicator
}
}
load()
}, [isLoading])
const handlePress = () => {
setResult(null);  // reset result
setIsLoading(true);  // show activity indicator
}

Answer 2

在更改result依赖关系时，尝试添加useEffect并将isLoading设置为false，如下所示：

const MyScreen = () => {
const [isLoading, setIsLoading] = useState(false);
const [result, setResult] = useState(null);
const handlePress = async () => {
setResult(null);  // reset result
setIsLoading(true);  // show activity indicator
const result = await MyAsyncFunc();  // native modules function
setResult(result);
//setIsLoading(false);  // turn off activity indicator
}
useEffect(() => {
if(result && isLoading){
setIsLoading(false);
}
}, [isLoading, result])
return (
<View style={styles.container}>
<MyButton title="Run" handlePress={handlePress} disabled={isLoading} />
{isLoading && <ActivityIndicator size="large" color="#00ff00" />}
<Text>{result}</Text>
</View>
)
}

希望这对你有效