Question

是否可以根据需要加载数据？

例如：我第一次加载list of challenges然后我转到了详情页面。现在我将刷新页面，并会收到challenges undefined之类的错误，因为只有在加载api时才会调用list of challenges。

所以问题是如何在store为空的时候再次调用api？

谢谢！

Answer 1

你可以这样设置你的状态：

this.setState({
  challenges :data
});

当您导航到详细信息页面时，您可以将其作为道具传递给子组件：

render{
  return(
    <Details challenges={this.state.challenges }/>
  );
}

在详细信息组件中，您可以

访问数据

this.props.challenges

并将其存储在变量或组件状态中。这样您就可以随时保留数据

Answer 2

只需将initialState的challenge属性设置为null，并在调用API之前检查state.challenges是否已定义。

例如：

constructor(props) {
    super(props);
    this.state = {challenges: null}
}
componentDidMount() {
    if (!this.state.challenges) {
        MyAPI.getChallenges().then(function(result) {
            this.setState({challenges: result.challenge});
        })
    }
}

Answer 3

感谢您的回答，但上面的解决方案不是我需要的。

所以我在onEnter上使用Route挂钩实现了这一点。

这是我的方法：

export default function(store, history) {
    const requireChallenges = (nextState) => {
        if(!challengesIsLoaded(store.getState())) {
            store.dispatch(fetchChallenges());
        }
    };
    return (
            <Provider store={store}>
              <Router onUpdate={() => window.scrollTo(0, 0)} history={history}>
                <Route path="/challenges/" component={ChallengesScene} onEnter={requireChallenges} />
              </Router>
            </Provider>
);

谢谢！

如果需要，如何加载数据？ React / Redux。没有SSR

3 个答案: