Question

我无法使用react和redux使页面导航正确。我有一个带有链接按钮的组件。单击该按钮时，我需要调用一个调度程序来更新我的状态，然后重定向到另一个页面。但是，重定向未发生，可能是因为我的操作创建者中的语法不正确。

如下所示，在组件AI中，尝试使用组件A中的history.push将我的页面导航到下一页。此方法有效，但是当我导航回组件时，似乎加载了两次“仪表板”页面，并且出现了更多问题它没有重新绑定，因此似乎没有使用最新状态进行更新。通过实际单击包含组件的页面的导航栏上的链接来完成导航。

我尝试在组件A中使用ComponentWillMount和ComponentWillReceiveNextProps，但这导致了无限循环。

历史记录助手

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

组件A：

import { dataActions } from '../../_actions';

componentDidMount() {
    this.fetchData();
}

handleLoadData(dataId) {
        this.props.dispatch(dataActions.loadData(dataID));
        //history.push('/dashboard')
    }

fetchData() {
    this.props.dispatch(dataActions.getAll());
}

render() {
    console.log("the value of props in render", this.props)
    const { dataList } = this.props; 

    return (
        <div>
            <h1>Data List</h1>
            {(dataList.items) ? renderdataListTable(dataList.items, this): null}
        </div>
    );
}

上面的

renderdataListTable仅返回带有按钮链接的简单表：

<td><button type="button" class="btn btn-link" onClick={(e) => self.handleLoadData(data.dataId)}>{data.dataName}</button></td>

动作创建者：

import { history } from '../_helpers';

    function loadData(dataId) {
        return dispatch => {
            dispatch(request(dataId));

                dataService.loadById(dataId)


                .then(
                    dataItems=> {
                        dispatch(success(dataId));
                        history.push('/dashboard');
                    },
                    error => {
                        dispatch(failure(error));
                        dispatch(alertActions.error(error));
                    }
                );
        };

        function request() { return { type: dataConstants.LOADBYID_REQUEST } }
        function success(dataItems, dataId) {
            return { type: dataConstants.LOADBYID_SUCCESS, payload: { dataItems, dataId} }}
        function failure(error) { return { type: dataConstants.LOADBYID_FAILURE, error}}
}

这是我的具有路由器设置的App组件：

import { history } from './_helpers';
import { alertActions } from './_actions';
import { PrivateRoute } from './_components';

class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }


 render() {
        const { alert } = this.props;
        return (
                <Router history={history}>
                <Layout>
                    <MuiThemeProvider>
                        {alert.message &&
                            <div className={`alert ${alert.type}`}>{alert.message}</div>
                        }
                        <PrivateRoute exact path="/" component={HomePage} />
                        <PrivateRoute exact path="/showdata" component={ShowDataList} />

                        <Route path="/home" component={Home} />
                        <Route path="/login" component={LoginPage} />
                        <Route path="/register" component={RegisterPage} />
                    </MuiThemeProvider>
                </Layout>
            </Router>
        );
    }
}

function mapStateToProps(state) {
    const { alert } = state;
    return {
        alert
    };
}

Answer 1

您可以将回调函数作为参数传递给您的操作：

在组件中：

callToFunctionWithCallback(dataId) {
  this.props.loadData(dataId, () => {
    //... here you do your redirect stuff     
  })
}

在行动中创建者：

export const loadData = (dataId, callbackFunction) => {
  // ... do your stuff here
    .then(
      dataItems=> {
         dispatch(success(dataId));
         callbackFunction()
         },
         error => {
           dispatch(failure(error));
           dispatch(alertActions.error(error));
        }
   );

调用调度后如何导航到新页面

1 个答案: