Question

这是我第一次使用该平台提问，因此，如果我的问题似乎还不够完善，请原谅我。

简介

我要实现的是一个动态的Tab导航器，其中Tab的数量根据数组中元素的数量而变化，其中该数组的元素数量随时间变化，即：

{
  userIds : [1,2,3,4,5,6]
}

将呈现一个带有6个标签的标签导航器

我正在使用react-redux来管理状态，我一直在youtube上关注此教程，仅供参考：https://www.youtube.com/watch?v=9boMnm5X9ak&list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK

上下文

在主代码段中，正在分派动作FetchMonthlyTransIdAct()，其中包括按顺序分派2个动作：

RequestMonthlyTransaction→FetchSuccess或FetchFail

（如FetchMonthlyTransIdAct.js中所述）的初始状态如下，每个动作所做的更改：

{
  loading : false
  Id : []
  error : ''
}

{
  loading : true //when RequestMonthlyTransaction is dispatched
  Id : []
  error : ''
}

{
  loading : false // When FetchSuccess is dispatched after RequestMonthlyTransaction
  Id : [1,2,3,4,5,6]// When FetchSuccess is dispacthed after RequestMonthlyTransaction
  error : ''
}

{
  loading : false //when FetchFail is dispacthed after RequestMonthlyTransaction
  Id : []
  error : 'some error message here' //when FetchFail is dispatched after RequestMonthlyTransaction
}

问题

所以我当前面临的问题是，当我使用useEffect / navigationContainer渲染组件时，tab.navigator似乎没有触发

这是我的代码段，我缩小了星号之间的问题来源

const Tab = createMaterialTopTabNavigator();

const mapStateToProps = state => {
  return {
    userData: state.MonthlyEntry
  }
}

const mapDispatchToProps = dispatch => {
  return {
    FetchMonthlyTransId: () => dispatch(FetchMonthlyTransIdAct())
  }
}

const EntryTabNavigator = ({userData, FetchMonthlyTransId}) => {

  useEffect (() => {
        FetchMonthlyTransId()
  }, [])
    console.log(userData.Id)

    if (userData.loading || userData.error != '') {
        return <View/>

    } else {
        return( 
             **************************************************************************************
             <NavigationContainer independent = {true}>
                <Tab.Navigator swipeEnabled = {true} tabBarOptions = {{scrollEnabled:true, tabStyle:{width:120}}}>
                    {userData.Id.map((data) => {return (<Tab.Screen key = {data.toString()} name = {data.toString()} component = {MonthlyTransactions} initialParams={{id:data.toString()}}/>)})}
                </Tab.Navigator>
             </NavigationContainer>
             **************************************************************************************
        )
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(EntryTabNaviga

简单的错误消息是：没有屏幕可供选项卡导航器呈现（由于userData.Id不应为空数组）

基于console.log(userData.Id)

预期输出应为Array [1,2,3,4,5,6] 但实际输出为Array []，表明useEffect未触发

我尝试将星号之间的代码段替换为 <View><Text>{userData.Id}</Text><View>，它能够按预期的方式渲染（返回以数组的字符串表示形式作为文本的屏幕），因此使我确定星号之间的代码段是有问题的部分。我还尝试在console.log中添加一个useEffect语句，当星号中的代码段不向控制台输出任何内容，但是当我替换代码段时，它不会输出至控制台在<View><Text>{userData.Id}</Text><View>

的星号之间

应该有一个类似的问题已经被解决，如果您可以指导我，将不胜感激，如果您可以指向我使用Redux来提高我的知识的资源，那也将是一件很棒的事情。初学者友好）！其他参考代码（减少器和操作）在下面

提前谢谢

FetchMonthlyTransIdAct.js


const requestMonthlyTransaction = () => {
  return {
    type: "REQUEST_MONTHLY_TRANSACTION",
  }
}

const fetchSucess = (ids) => {
  return {
    type: "FETCH_SUCCESS",
    payload: ids,
  }
}

const fetchFail = (error) => {
  return {
    type: "FETCH_FAILURE",
    payload: error,
  }
}

export const FetchMonthlyTransIdAct = () => {
  return (dispatch) => {
    dispatch(requestMonthlyTransaction())
    async function getId() {
      return require('../../data/DummyId.js').id //returns [1,2,3,4,5,6]
    }
    getId().then(
      id => dispatch(fetchSucess(id))
    ).catch(
      error => dispatch(fetchFail(error))
    )

  }
}

FetchMonthlyTransIdRed.js

const initialState = {
  loading:false,
  Id : [],
  error:''
}

const FetchMonthlyTransactionIdRed = (state = initialState, action) => {
  switch (action.type){
    case "REQUEST_MONTHLY_TRANSACTION":
      return {
        ...state,
        loading: true,
      }

    case "FETCH_SUCCESS":
      return {
        ...state,
        loading: false,
        Id: action.payload
      }

    case "FETCH_FAILURE":
      return {
        ...state,
        loading: false,
        error: action.payload
      }
    default: return state;
  }
}


export default FetchMonthlyTransactionIdRed;

Answer 1

经过大量修改后，我设法找到了解决问题的方法（或一种解决方法）。这将在 FetchMonthlyTransIdRed.js 中处于初始状态的Id属性数组中添加一个初始元素，这将使导航组件的第一次呈现没有问题，并且随后在调度FetchMonthlyTransId的下一次重新渲染中Id，然后使用我导入的数组进行更新

与MaterialTopTabNavigator一起使用时不会触发UseEffect

1 个答案: