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

Question

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

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

在下面的代码中，setIsLoading 在异步调用之前实际上并未更新，因此 ActivityIndi​​cator 不会出现在 UI 上。我意识到为什么会出现这种情况 (here) 我只是不知道在进行异步调用之前实际确保 ActivityIndi​​cator 显示的推荐方法。

请帮忙。在反应中做到这一点的正确方法是什么？

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

尝试添加useEffect 并在更改result 依赖项时设置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>
    )
}

希望这对你有用

Answer 2

您可以尝试只使用一种状态吗？我认为不需要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
}