在路由器上点击时调用API

Calling API when clicked on a Router

本文关键字：调用 API 路由器      更新时间：2023-09-26

我是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')
);

我看到的挑战是，我们调用API s，即使我们可能不会加载特定的页面(例如/transactions，但仍然调用loadTransactions())。

在点击route或者加载Component的时候加载数据的方法有哪些?

例如，当我点击/transactions时，我只调用loadTransactions()(并在store中保存数据)。

感谢


我试着按照建议解决问题，得到了以下结果，我想验证这种方法是否正确。请让我知道

class TransactionsPage extends React.Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    console.log("component mounted");
    this.props.fetchTransactions;
  }
  render() {
    return (
      <div>
        <h1>Transactions</h1>
        <TransactionList transactions={this.props.transactions}/>
      </div>
    );
  }
}
TransactionsPage.propTypes = {
  transactions: PropTypes.array.isRequired
};
function mapStateToProps(state, ownProps) {
  return {
    transactions: state.transactions
  };
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(transactionActions, dispatch),
    fetchTransactions: dispatch(loadTransactions())
  };
}
export default connect(mapStateToProps, mapDispatchToProps)(TransactionsPage);

但是我得到Warning作为

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`.

我使用onEnter，非常满意:

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
);
}
当API调用与路由的参数相关时，我更喜欢它而不是componentDidMount方法。这样，API调用在组件挂载之前进行，从而增加了组件挂载时数据准备就绪的机会。 另一方面，如果我有一个天气组件，它只需要天气API的状态，它在应用程序的其他任何地方都不存在，我将触发一个API调用从componentDidMount。

如果你修复了一些语法错误，你的代码就可以工作了。工作示例可以在这里找到:http://jsbin.com/sixofu/edit?js,output

在组件的componentWillMount生命周期钩子中加载数据

这个生命周期钩子将在组件呈现之前执行。您可以在这里阅读更多内容:https://facebook.github.io/react/docs/component-specs.html

相关文章：