时间戳

首页 > 解决方案 > 使用 Redux 时如何管理 TextInput 更改的组件状态？

reactjs - 使用 Redux 时如何管理 TextInput 更改的组件状态？

问题描述

我正在学习 ReactNative + Redux（Reducer + Action）。我陷入了一种情况。我知道每当setState被调用组件渲染调用时。我面临的问题是我有一个 TextInput。当 onChangeText 事件被调用时，我正在管理用户输入状态。但现在我已经集成了调用 API 的 Redux(Reducer + Action) 机制。一旦我得到来自 Redux 的成功响应，我将代码重定向新屏幕。但是当我点击后退按钮而不是将我重定向到后屏幕时，它再次将我重定向到新屏幕。由于 redux 商店仍然有我存储在 api 成功上的那些 api 响应。所以最后我决定使用 redux 状态管理 TextInput 文本更改，但我觉得这是错误的方法。请指导我这个场景。

TextInput 代码（我创建了具有 TextInput 的通用组件 EditText）：

<EditText
   value={this.props.api.textPhoneNumber}
   placeHolderText={Strings.phone_number}
   inputType={'numeric'}
   secureText={false}
   maxInputLength={10}
   onChangeText={this.handlePhoneNumberChange}/>

处理文本输入：

 handlePhoneNumberChange = (phoneNumber) => {
        this.props.phoneNumberInputChange(phoneNumber);
    };
constructor(props) {
        super(props);
        this.handlePhoneNumberChange = this.handlePhoneNumberChange.bind(this);
    }

行动：

export const phoneNumberChanged = (phoneNumber) => {
    return dispatchResponse(phoneNumber, PHONE_NUMBER_CHANGE)
};

减速机：

 case PHONE_NUMBER_CHANGE:
            return {...state, textPhoneNumber: action.payload, errorResponse: {}, sendOtp: {}, checkOtp: {}};

获取 api 成功时重定向的代码：

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.api.sendOtp.Status === 'Success') {
        this.props.navigation.navigate('AuthenticateOTP')
    }
}

所以主要问题是我如何一起管理组件状态和 Redux 状态？还是我只需要使用 Redux 状态来完成每项任务？

标签： reactjsreact-nativereduxreact-reduxreact-native-navigation

解决方案

您可以创建一个重置流程状态值的操作，然后使用 componentWillUnmount() 调用操作创建器来重置流程。

推荐阅读