Question

如果用户传递了错误的输入，我试图创建一个按钮以将页面重新加载回其原始状态。

我尝试回顾该操作，但是该操作对页面没有任何影响。

refreshOnError = () => {
    this.props.fetchData('AAA')
}

我还尝试了以下操作：

refreshOnError = () => {
    window.location.reload()
}

这将返回此错误undefined is not an object (evaluating 'window.location.reload')

这是我的组件

import React, { Component } from 'react';
import { View, Text, ActivityIndicator, ScrollView} from 'react-native';
import { SearchBar, Button } from 'react-native-elements';
import { connect } from 'react-redux';
import {fetchData} from '../Redux/actions/postdata';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataInput:'',
        }
    }
    componentDidMount() {
        this.props.fetchData('AAA')
    }
    callFetchData = () => {
        this.props.fetchData(this.state.dataInput);
    }
    refreshOnError = () => {
        this.props.fetchData('AAA')
        //window.location.reload()
    }
    render() {
        const { fetching, warningVisibility} = this.props;
        if(fetching) {
            return(
              <View>
                  <ActivityIndicator />
              </View>
            )
        } else if(warningVisibility) {
            return(
                <View>
                    <Text>Check your internet connection</Text>
                    <Button title='Refresh' onPress={this.refreshOnError}/>
                </View>
            )
        } else {
            return (
                <ScrollView>
                    <SearchBar 
                        placeholder="Type your name"
                        onChangeText={(text) => this.setState({dataInput:text})}
                        onCancel={()=>this.setState({dataInput:''})}
                        onSubmitEditing={(text) => this.callFetchData({dataInput:text})}
                        value={this.state.dataInput}/>
                </ScrollView>      
            )
        }
  }
}

const mapStateToProps = (state) => {
    return {
      fetching: state.dataInfo.fetching,
      warningVisibility: state.dataInfo.warningVisibility
    }
};

export default connect(mapStateToProps, {fetchData})(Home);

有没有一种方法可以刷新页面并将其恢复到用户创建错误之前的状态？

此外，如果有一种方法可以创建传奇来处理刷新，那我就使用redux-saga，那会很棒。谢谢！

更新：我的传奇电话

import { delay } from 'redux-saga';
import {call, put, takeEvery, fork} from 'redux-saga/effects';
import * as service from '../../Services/api';
import * as actions from '../actions/postData';
import * as types from '../actions/actionTypes';

function* fetchData(){
  try{
    yield put(actions.requestData());
    const [ post, comment ] = yield ([
      call(service.getUserPost),
      call(service.getUserComment)
    ])
    yield put(actions.receiveData( post.data, comment.data));    
  } catch(e){
    yield put(actions.receiveDataFailed());
  }
}

function* watchFetchData(){
  yield takeEvery(types.FETCH_Data, fetchData);
}

function* showWarning(action){
  yield delay(1500);
  yield put(actions.hideWarning());
}

function* watchReceiveDataFailed(){
  yield takeEvery(types.RECEIVE_DATA_FAILED, showWarning);
}

export default function* dataSaga(){
  yield fork(watchFetchData);
  yield fork(watchReceiveDataFailed);
}

Answer 1

由于您想将页面重新加载回原始状态，因此，您应该创建一个reset()操作，将还原器还原到其initialState，

Actions.js

export function reset () {
  return {
    type: RESET
  }
}

Reducers.js

const initialState = {/* Define your Initial State here */}

function mainReducer(state = initialState, action) { //<== Bind the initialState here
 switch (action.type) {
   case RESET:
     return initialState;
 ...
}

Sagas.js

function* fetchData(){
  ...
  catch(e){
    yield put(actions.reset()); // <== Reset to InitialState on Failure
    yield put(actions.receiveDataFailed());
  }
}

错误后重新加载页面，redux

1 个答案: