Question

我有这样的反应成分

import * as React from 'react';
...
export class MyComponent extends React.Component {
    onCreate = () => {
        this.props.actions.create();
    }

    render() {
        return (
            <div>
                <button onClick={this.onCreate}>Button</button>
                <div onClick={this.onCreate}>Div</div>
            </div>
        );
    }
}

this.onCreate传递到OtherComponent中，该函数将函数再向下传递几次到另一个react组件中，并在单击div时最终调用该函数。

我的动作创建者如下：

import {history} from '../../../index.tsx';
...
create: () => dispatch => {
    dispatch(new ActionOne());
    dispatch(new ActionTwo());
    history.push('/someurl');
    debugger;
    dispatch(new ActionThree());
}
...

历史就是这样：

import { Provider } from 'react-redux';
import { Route, Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
...
export const history = createBrowserHistory();

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={AppM} />
        </Router>
    </Provider>,
    document.getElementById('root')
);

当按钮和div发生history.push时，问题是不同的行为。

从按钮上单击调试器行时，网页已经显示/someurl，但是从div来看，/someurl尚未显示，但最终会在{{1}之后的某个时间出现}。

如果将ActionThree或history.push('/someurl');包裹在dispatch(new ActionThree());中，我将获得一致的行为，但是我想了解这里发生的事情。行为差异的原因可能是什么？

React-Router V4 History.push，div vs按钮

0 个答案: