Question

我的应用程序中有三个选项卡，我曾经从每个选项卡中获取值并将数据保存在第三个选项卡中。如果导航顺序未更改，则应用程序运行良好。（Tab1-> Tab2-> Tab3。

但是，当我从Tab3-> Tab2-> Tab3导航时，来自Tab1的值将为null。类似地，当我从Tab3-> Tab1-> Tab3导航时，来自Tab2的值将为空。

Reducer.js

const initialState = {
external: [],
internal: [],
usercode:'',
vehicleImage:'',
checkInoutcontrols:[]

}
const Reducer = (state = initialState, action) => {
switch (action.type) {
    case 'insertExternalCoordinates':
        return { external: action.value }
    case 'insertInternalCoordinates':
        return { internal: action.value }
    case 'insertUserCode':
        return {usercode:action.value}
      case 'insertImage':
        return {vehicleImage:action.value} 
        case 'insertCheckInOutControls':
            return {checkInoutcontrols:action.value}  


}

return state;
}
export default Reducer

Tab1

//Saving state ---redux
const mapStateToProps = state => ({
external: state.external

})

//使用函数--- redux插入值

   const mapDispatchToProps = dispatch => ({
   insertExternalCoordinates: (value) => dispatch({ type: 
  'insertExternalCoordinates', value: value })
  });


export default connect(mapStateToProps, mapDispatchToProps) 
(CheckOutExternal)

Tab2

//Saving state ---redux
const mapStateToProps = state => ({
insertCheckInOutControls: state.insertCheckInOutControls

})

//使用函数--- redux插入值

   const mapDispatchToProps = dispatch => ({
   insertCheckInOutControls: (value) => dispatch({ type: 
  'insertCheckInOutControls', value: value })
  });


export default connect(mapStateToProps, mapDispatchToProps) 
(CheckOutParts)

Tab3

//Saving state ---redux
const mapStateToProps = state => ({
insertCheckInOutControls: state.insertCheckInOutControls 
external:state.external,
usercode: state.usercode,

checkInoutcontrols:state.checkInoutcontrols

})

//使用函数--- redux插入值

   const mapDispatchToProps = dispatch => ({
  insertExternalCoordinates: (value) => dispatch({ type: 
 'insertExternalCoordinates', value: value }),

  insertCheckInOutControls: (value) => dispatch({ type: 
 'insertCheckInOutControls', value: value })
  });


export default connect(mapStateToProps, mapDispatchToProps) 
(CheckOutSignature)

Apps.js -----存储已创建

import React, {Component} from 'react';
import {KeyboardAvoidingView} from 'react-native';
import AppNavigation from './main';
import Reducer from './modules/Reducers';
import {Provider} from 'react-redux'
import {createStore} from 'redux';
const store = createStore(Reducer)



const  App = () => ({
render() {
    return (
        <Provider store={store}>

        <AppNavigation/>

        </Provider>

        );
}
})

export default App;

谁能帮我解决这个问题。

Answer 1

似乎问题出在化简器中，您只返回更新的键值对，而不是完整的化简器状态。因此，在每个更新缩减器之后只有一个键-值对，最后一个更新。将...state添加到要返回的每个对象中，它将保留其他属性。

这样编写减速器：

const Reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'insertExternalCoordinates':
            return { ...state, external: action.value }
        case 'insertInternalCoordinates':
            return { ...state,, internal: action.value }
        case 'insertUserCode':
            return { ...state,, usercode:action.value }
        case 'insertImage':
            return { ...state, vehicleImage:action.value } 
        case 'insertCheckInOutControls':
            return { ...state, checkInoutcontrols:action.value } 
    }
    return state;
}

检查此示例以获取更多详细信息：

let obj = { a:1, b: 2 };

function update(key, value) {
  switch(key) {
    case 'a': return { ...obj, a: value  }
    case 'b': return { ...obj, b: value  }
  }
  return obj;
}

let newObj = update('a', 10);
console.log('obj', obj);
console.log('newObj', newObj);

在标签之间导航时，Redux状态变得不确定

1 个答案: