React native 如果上载到服务器的数据失败，则保留组件的状态-react native

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

提前谢谢

SignUp.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);

减速器

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

---

您可以将文本字段值从本地状态移动到redux存储，并在数据上载成功时将值重置为空字符串，具体位置为

注册成功

，您可以在redux状态下重置文本字段值

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