如果上传到服务器的数据失败，则保留组件的状态 - 本机反应

Question

我正在使用带有 react native 的 redux。我有一个表单，用户可以在其中动态添加字段编号。因此，输入字段有一个单独的组件类，以便以后可以根据需要添加它。将数据提交到服务器后，无论成功与否，组件输入的状态均为空。数据上传到服务器失败时如何保留状态？

提前谢谢。

注册.js

import SignUpUserInfo from './Common/SignUpUserInfo';
var index = 0;
class SignUp extends React.Component {
state = {
myArr: [],
}
_onPressOut() {
let temp = index ++
this.state.myArr.push(temp)
this.setState({
myArr: this.state.myArr
})
}
render() {
if (this.state.myArr.length < 1) {
let temp = index;
this.state.myArr.push(temp);
this.setState({
myArr: this.state.myArr,
});
}
let Arr = this.state.myArr.map((a, i) => {
return <SignUpUserInfo key={i} {...this.props} />;
});
if (signUpFetching) {
return <ActivityIndicator size={'large'} color= {'green'} />;
}
return (
<ScrollView>
<View style={[{ backgroundColor: '#E9E9E9' }]}>
{ Arr }
<View style={CommonStyle.bottomGap}>
<TouchableOpacity onPress={() => this._onPressOut()}>
<Text>Register more people</Text>
</TouchableOpacity>
</View>
</View>
<View style={CommonStyle.horizontalGap}>
<TouchableOpacity
onPress={() => {
this.props.SignUpTest(this.state.resultArr);
}}
>
<View style={{ backgroundColor: 'green', padding: 10, }}>
<Text style={{ color: 'white' }}>Sign Up</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
);
}
}
const mapStateToProps = (state) => {
const { Name, Designation, signUpFetching } = state.Auth; //how to get name & designation for multiple people here?
return { Name, Designation, signUpFetching };
};
export default connect(mapStateToProps, { AuthGet, SignUpTest })(SignUp);

注册用户信息.js//包括用户要添加的必需输入

constructor(props) {
super(props);
this.state = {
name: '',
SignUpDesignation: '',
};
}
render () {
return (
<View style={{ marginBottom: 20 }}>
<TextInput
placeholder={'Enter Your Name'}
onChangeText={text => {
//'Name' prop should be different for different input.How to do that?
this.onNameChange(`Name`, text);
}}
value={this.state.name}
/>
<TextInput
placeholder={'Designation'}
onChangeText={text => {
this.onDesignationChange(`Designation`, text);
}
}
value={this.state.SignUpDesignation}
/>
</View>
);
}
}
export default SignUpUserInfo;

行动

export const AuthGet = ({prop, value}) => {
return ({
type: SIGN_UP_GET,
payload: {prop, value},
});
};
export const SignUpTest = (data) => {
return (dispatch) => {
dispatch({
type: SIGN_UP_INITIAL,
});
axios({
method: 'post',
url: baseUrl + signUpUrl,
data: {
memberDetails: JSON.stringify(data),
},
}).then(response => {
if (response.data.status === 'true') {
dispatch({
type: SIGN_UP_SUCCESS,
payload: response.data,
});
} else {
dispatch({
type: SIGN_UP_FAILURE,
payload: response.data.message,
});
}
}).catch(err => {
dispatch({
type: SIGN_UP_FAILURE,
payload: 'Smth went wrong',
});
});
}
}

还原剂

const INITIAL_STATE = {
Name: '',
Designation: '',
signUpFetching: false,
signUpResponse: [],
signUpErr: '',
};
export default (state = INITIAL_STATE, actions) => {
switch (actions.type) {
case SIGN_UP_GET:
return { ...state, [actions.payload.prop]: actions.payload.value};
case SIGN_UP_INITIAL:
return { ...state, signUpFetching: true, signUpResponse: [], signUpErr: '' };
case SIGN_UP_SUCCESS:
return { ...state, signUpFetching: false, signUpResponse: actions.payload, signUpErr: '' };
case SIGN_UP_FAILURE:
return { ...state, signUpFetching: false, signUpErr: actions.payload };
default:
return state;
}
};

Answer 1

您可以将文本字段值从本地状态移动到 redux 存储，并在数据上传成功时将值重置为空字符串，在 reducer atSIGN_UP_SUCCESS，您可以在 redux 状态下重置文本字段值。