Reactjs 不渲染功能组件

我的react本机应用程序在运行后显示一个空白屏幕 使用redux进行状态管理。 主屏幕功能组件也可能无法正确呈现平面列表

可能我错误地使用了useSelector钩子，或者Redux操作不正确。导航由react导航处理

       import { 
           GET_CURRENCY,
           GET_CURRENCY_SUCCESS,
           GET_CURRENCY_FAILURE 
       } from "../ActionTypes";
        
        const  myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        myHeaders.append("Authorization", "{BearerToken} ");
        
        const requestOptions = {
          method: 'GET',
          headers: myHeaders,
          redirect: 'follow'
        };     
        export const getCurrency = () =>{
            return{
            type: GET_CURRENCY,
        
            }
        }
        export const currencySuccess = instruments => {
            return{
            type: GET_CURRENCY_SUCCESS,
            payload: instruments
        }}
        
        export const currencyFailure = error => {
            return{
            type: GET_CURRENCY_FAILURE,
            payload: 
                error
            }
        } 
          export const  fetchCurrency =() => {
              return dispatch => {
         dispatch(getCurrency())
        
         fetch("https://api-fxpractice.oanda.com/v3/instruments/EUR_USD/candles?price=M", requestOptions)
                 // eslint-disable-next-line no-unused-vars
                 .then(response => response.data)
                 .then(instruments =>{ 
                     dispatch (currencySuccess(instruments))
                    })
                     // eslint-disable-next-line no-undef
                 .catch (error => {
                     const errorMsg = error.message
                    dispatch(currencyFailure(errorMsg))
                 })
            
          }
                
          }
        export default fetchCurrency

    

主屏幕

    import   React, {useEffect} from 'react'
    import { FlatList, ActivityIndicator, View, Text, SafeAreaView} from 'react-native'
    import Instrument from '../../../components/Instrument'
    import styles from './styles'
    import {useSelector, useDispatch} from 'react-redux'
    import  fetchCurrency  from '../../Redux/Actions/currencyActions'
    
     function HomeScreen () { 
      const dispatch = useDispatch()
    
      useEffect(() => {
       dispatch(fetchCurrency())
      }, []);
      const { instruments, loading, error} = useSelector(state => state.reducer
      );
    {error &&
      <View><Text>Error</Text></View>
    }
    {loading && <ActivityIndicator size='large' />}
        return(
          <SafeAreaView
         
          style={styles.container}
        >
           <FlatList
              data={instruments}
              numColumns={1}
              contentContainerStyle = {styles.list}
              keyExtractor  = {({item}) => item.toString() }
              renderItem = {(item, index) => (
                <Instrument currency={item}  />
              )}
    />
    </SafeAreaView>
        );
      }
    
    export default HomeScreen
    
    

---

您需要返回在

错误

或

加载

案例中创建的组件

  if (error) 
    return (<View><Text>Error</Text></View>)
  else if (loading)
    return (<ActivityIndicator size='large' />)
  else 
    return (<SafeAreaView
  ...

if（错误）
返回（错误）
否则，如果（加载）
返回（）
其他的
return（抛出一个错误：
无法读取未定义的
的属性'instruments'。我假设这是因为您没有成功地从获取中获取数据。您可能应该对返回的承诺进行一些拒绝处理。
  if (error) 
    return (<View><Text>Error</Text></View>)
  else if (loading)
    return (<ActivityIndicator size='large' />)
  else 
    return (<SafeAreaView
  ...

{error &&
      <View><Text>Error</Text></View>
    }

<OuterComponent>
  {flag && (<OptionalComponent/>)}
</OuterComponent>