react-native - 如何持久化 Redux 表单值？

Question

我正在使用手风琴折叠反应原生来管理部分。当我折叠该部分并再次打开它时，redux 表单值消失了。我如何设法维护 Redux 表单字段值的状态。提前致谢。

这是我的代码：

<Collapse style={styles.item} isCollapsed={this.state.isCollapsed_First}
                        onToggle={isCollapsed => this.setState({ isCollapsed_First: isCollapsed })}
                    >
                        <CollapseHeader style={styles.header}>
                            <View style={styles.headerContent}>
                                <Text style={styles.headerText} >Personal Information</Text>
                                <Icon name={this.state.isCollapsed_First ? "arrow-up" : "arrow-down"} size={18} color='#fff' />
                            </View>
                        </CollapseHeader>
                        <CollapseBody>
                            <View style={{flexDirection:'row',marginTop:7}}>
                                <View style={{width:'48%',marginRight:'4%'}}>
                                    <Field name="first_name" 
                                    placeholder="First Name" 
                                    inputViewStyle={styles.inputView}
                                    inputTextStyle={styles.inputText}
                                    component={this.renderTextInput}    
                                    />
                                </View>
                                <View style={{width:'48%'}}>
                                    <Field name="last_name" 
                                    placeholder="Last Name" 
                                    inputViewStyle={styles.inputView}
                                    inputTextStyle={styles.inputText}
                                    component={this.renderTextInput}
                                    />
                                </View>
                            </View>
                            <View style={{flexDirection:'row',marginTop:-7}}>
                                <View style={{width:'100%'}}>
                                    <Field name="dd_country" 
                                        placeholder="Country" 
                                        data = {this.state.countriesList}
                                        onItemSelect={item => this.props.change('dd_country', item.id)}
                                        textInputStyle={styles.inputView}
                                        component={this.renderDropdownInput}
                                    />
                                </View>
                            </View>

                            <View style={{flexDirection:'row',marginTop:-7}}>
                                <View style={{width:'100%'}}>
                                    <Field name="dd_ben_type" 
                                        placeholder="Beneficiary Type" 
                                        data = {this.state.custTypesList}
                                        onItemSelect={item => this.props.change('dd_ben_type', item.id)}
                                        textInputStyle={styles.inputView}
                                        component={this.renderDropdownInput}
                                    />
                                </View>
                            </View>
                        </CollapseBody>
                    </Collapse>

标签： react-nativereact-reduxpersist

Answer 1

你必须自己维护它的状态。尝试维护组件中的状态，如下所示：

export function Form() {
  const [name, setName] = useState('');
  const [country, setCountry] = useState('');

  return(
    <View>
      <Input
        onChangeText={setName}
        value={name}
        placeholder='Name'
      />
      <Input
        onChangeText={setCountry}
        value={country}
        placeholder='Country'
      />
    </View>
  )
}