UseEffect 加载屏幕无法正常工作

Question

我正在尝试显示加载屏幕。

这是我的代码。我把 setLoading(true) 和 setLoading(false) 放在 useEffect 中，如下

useEffect(() => {
    setLoading(true);
    const unsubscribe = navigation.addListener('focus', () => {
      setDescription(callnamePassed);
      setName(namePassed);
      setCompany(companyPassed);
      setEmail(emailPassed);
      setPhone(phonePassed);
      setAddress(addressPassed);
      setAddressTwo(addressTwoPassed);
      setZip(zipPassed);
      setCity(cityPassed);
      setState(statePassed);
      setCountry(countryPassed);
      setModalOneValue(countryPassed);
      setIsDefault(isDefaultPassed);
    });
    setLoading(false);
    return unsubscribe;
  }, [route]);

当显示不同的项目详细信息时，我在详细信息屏幕中使用它。 假设我们得到了 detail A and B。

当我第一次进入 details A 时。加载动画工作正常。 但是如果我回到父屏幕并转到 detailsB 则不会显示加载动画。

组件看起来像这样

return (<ScrollView style={styles.container}>
      {loading ? (
        <Loading />
      ) : (
        <View>...</View>))

Answer 1

试试这个方法

const [loading, setLoading] = useState(false);

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      setLoading(true);
      setDescription(callnamePassed);
      ....
    });
    setLoading(false);
    return unsubscribe;
  }, [route]);