Я впервые использую эту платформу, чтобы задавать вопросы, поэтому, пожалуйста, извините меня, если мой вопрос не кажется хорошо проработанным.
краткое введение
кто я пытается достичь динамический c навигатор вкладок, при этом количество вкладок изменяется в зависимости от количества элементов в массиве, где этот массив изменяется в количестве элементов с течением времени, то есть:
{
userIds : [1,2,3,4,5,6]
}
отобразит навигатор вкладок с 6 вкладками
Я использую response-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>, и он смог отобразить как ожидалось (возвращая экран со строковым представлением массива в виде текста), что привело меня к выводу, что фрагмент кода между c звездочки - это проблемная часть. Я также попытался добавить оператор 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;