时间戳

首页 > 解决方案 > 从 redux 获取数据。为什么我的加载屏幕不起作用？

reactjs - 从 redux 获取数据。为什么我的加载屏幕不起作用？

问题描述

我正在尝试向我的功能组件添加加载屏幕

我正在从 redux 获取数据。

这是我的useEffect钩子

const {addressList, replyMessage} = useSelector((state) => ({
    addressList: state.contactReducer.addressList,
    replyMessage: state.contactReducer.replyMessage,
  }));

useEffect(() => {
    async function anyNameFunction() {
      setLoading(true);
      await dispatch(fetchAddressList());
      
    }
    anyNameFunction();
    setLoading(false);
  }, []);

如您所见，我正在等待调度，然后将 setLoading 设为 false。

但是，当我尝试渲染组件时，加载屏幕部分永远不会出现。在一定时间后，来自 redux 的数据被渲染。这是为什么？

这是我返回的 JSX

<ScrollView>
      {loading && (
        <View
          style={{
            height: windowHeight,
            width: windowWidth,
            justifyContent: 'center',
            alignItems: 'center',
            marginBottom: 50,
          }}>
            <Text>Loading</Text>
            <Text>Loading</Text>
            <Text>Loading</Text>
            <Text>Loading</Text>
            <Text>Loading</Text>
          {/* <Loading /> */}
        </View>
      )}
      <View style={styles.landingContainer}>
        <Image
          style={styles.landingContainerImage}
          source={require('../../assets/images/AboutUs.jpg')}
        />
        <Text style={styles.landingText}>CONTACT RapidoBikes</Text>
      </View>
</ScrollView>

标签： reactjsreact-native

解决方案

您好，您的函数是异步的，调用者不会等待，例如代码执行将在 useEffect 内继续，您的函数 anyNameFunction 将具有不同的执行上下文。尝试这个

const {addressList, replyMessage} = useSelector((state) => ({
    addressList: state.contactReducer.addressList,
    replyMessage: state.contactReducer.replyMessage,
  }));

useEffect(() => {
    async function anyNameFunction() {
      setLoading(true);
      await dispatch(fetchAddressList());
      setLoading(false);
    }
    anyNameFunction();
  }, []);

推荐阅读