Как сохранить значения формы Redux?

Question

Я использую accordion-collapse-Reaction-native для управления разделами. Когда я сверну этот раздел и снова открою его, значения излишней формы исчезнут. Как мне удается поддерживать состояние значений поля формы 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>

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>
  )
}