Javascript 单击路由器时调用API

我是

React

+

Redux

的初学者

我在两者上都做了一个测试，并试图扩展我创建的应用程序

当然，Cory提到了在应用程序加载时加载初始数据。因此，在我们的应用程序入口点

index.js

中，我们做了如下操作

const store = configureStore();
store.dispatch(loadCourses());
store.dispatch(loadAuthors());
store.dispatch(loadTransactions());

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>,
  document.getElementById('app')
);

但是有了这个，我得到了警告

warning.js?8a56:36 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

---

加载组件中的数据将在组件中挂载生命周期挂钩

此生命周期挂钩将在组件呈现之前执行。您可以在此处阅读更多内容：

希望这有帮助。

我使用它，并且非常满意：

const sessionEnter = (location) => {
    let {sessionId} = location.params;
    store.dispatch(appActions.loadApp(sessionId, 'APP'))
    store.dispatch(appActions.getComboDetailsBySessionId(sessionId, 'APP'))
    setFirebaseAppListeners();
}

const routeConfig = [   
    {path: '/session/:sessionId', component: App, onEnter: sessionEnter},
    {path: '/signup', component: Signup},
    ...
];

const renderStore = () => {
    rootElement = document.getElementById('root')

    render(
        <MuiThemeProvider>
            <div className="root">
                <Provider store={store}>
                    <Router history={history} routes={routeConfig}/>
                </Provider>
            </div>
        </MuiThemeProvider>,

        rootElement
    );
}</MuiThemeProvider>,

    rootElement
);
}

const sessionner=（位置）=>{
设{sessionId}=location.params；
store.dispatch（appActions.loadApp（sessionId，'APP'））
store.dispatch（appActions.getComboDetailsBySessionId（sessionId，'APP'））
setFirebaseAppListeners（）；
}
常量routeConfig=[
{path:'/session/:sessionId'，组件：App，oneter:sessionner}，
{路径：'/signup'，组件：signup}，
...
];
常量渲染存储=（）=>{
rootElement=document.getElementById（'root'））
渲染(
,
根元素
);
},
根元素
);
}

当API调用与路由参数相关时，我更喜欢使用componentDidMount方法。通过这种方式，API调用在装入组件之前进行，这增加了在装入组件时数据准备就绪的机会

另一方面，如果我有一个天气组件，它只需要来自天气API的状态，而该状态在应用程序的其他任何地方都不存在，那么我将触发来自组件didmount的API调用

更新

---

如果您修复了一些语法故障，代码将正常工作。这里可以找到工作示例：

这也意味着容器组件依赖于

Redux

存储，我也不知道这是一个好主意。您能详细说明一下吗？如我所见，如果您有一个容器，您已经通过mapStateToProps和mapDispatchToProps与存储交互。我更新了代码示例，您能告诉我这是否正确吗？您确定此警告来自此文件吗？这通常意味着您正在从构造函数或componentDidMount调用setState，这将导致无休止的循环。顺便说一句，在这段代码中，不会调用fetchTransactions。@daydreamer我在我的答案中添加了一个链接，指向您的代码的工作版本。这个
fetchTransactions:dispatch（loadTransactions（））
应该是
fetchTransactions:（）=>dispatch（loadTransactions（））
const sessionEnter = (location) => {
    let {sessionId} = location.params;
    store.dispatch(appActions.loadApp(sessionId, 'APP'))
    store.dispatch(appActions.getComboDetailsBySessionId(sessionId, 'APP'))
    setFirebaseAppListeners();
}

const routeConfig = [   
    {path: '/session/:sessionId', component: App, onEnter: sessionEnter},
    {path: '/signup', component: Signup},
    ...
];

const renderStore = () => {
    rootElement = document.getElementById('root')

    render(
        <MuiThemeProvider>
            <div className="root">
                <Provider store={store}>
                    <Router history={history} routes={routeConfig}/>
                </Provider>
            </div>
        </MuiThemeProvider>,

        rootElement
    );
}</MuiThemeProvider>,

    rootElement
);
}