React功能组件未渲染

如何解决React功能组件未渲染

我的React Native应用程序运行后显示黑屏 使用redux进行状态管理。 HomeScreen功能组件也可能无法正确呈现Flatlist。

也许我错误地使用了useSelector钩子，或者Redux操作不正确。导航由反应导航处理。

       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
    
    

减速器

    import {
        GET_CURRENCY,GET_CURRENCY_FAILURE
    
    } from '../ActionTypes'
    
    const initialState = {
        instruments: [],loading: false,error: null
    }
    
    const reducer = (state= initialState,action) => {
        switch(action.type){
            case GET_CURRENCY:
                return {...state,loading: true}
            case GET_CURRENCY_SUCCESS:
                return {...state,instruments: action.payload.instruments }
            case GET_CURRENCY_FAILURE:
                return { ...state,error: action.payload}
            default:
                return state
        }
    
    }
    
        export default reducer;

解决方法

您需要返回在error或loading情况下创建的组件。

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

编码方式

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

您在代码中拥有的内容只能在JSX组件内使用，以有条件地呈现另一个组件。例如

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

之所以起作用，是因为JSX中的花括号包含常规的JavaScript代码，并且flag && (<OptionalComponent/>)的结果是false或<OptionalComponent>，而对于React false来说根本没有生成任何输出。