Question

我已将路线设置如下：

<Router>
    <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
    </Switch>
</Router>

在Home组件上，我只想在安装时第一次进行ajax调用。

export default class Home extends Component {
    componentDidMount(){
        //make ajax call only once. Do some stuff on .then()
    }
}

问题是，如果用户在Home和About之间切换页面，Home组件将再次呈现所有内容，因此我的ajax调用将再次被触发。

我该如何解决这个问题？我应该将第一个数据提取存储在redux存储上，然后使用if语句还是有更好的方法？

Answer 1

如果你想使用Redux，你需要发送一个动作来获取数据，如果它还没有。

class Home extends Component {
    componentDidMount(){
        if (!this.props.homeContent) {
            this.props.dispatch(fetchHomeContent());
        }
    }
}

// Map redux store to your component props
const mapStateToProps = (state) => {
     return {
         'homeContent': state.homeContent
     }
}

// Redux 'connect' function, to subscribe your component for state changes.
export default connect(mapStateToProps)(Home);

您的操作是异步的，因此您应该使用redux-thunk中间件，请查看文档以了解它的设置。

你的行动：

function fetchHomeContent(subreddit) {
     return dispatch => {
         return fetch(`https://your-domain/pathname`)
             .then(response => response.json())
             .then(json => dispatch(receiveData(json)))
     }
}

function receiveData(json) {
    return {
        type: 'receive',
        data
    }
}

你的减速机：

switch (action.type) {
    case 'receive':        
        return Object.assign({}, state, {
            'homeContent': action.data
        })
    default:
        return state
}

这只是为了让您对常规设置有所了解，但仍需要连线（设置商店，根减速机等），最好的方法是遵循Redux docs/tutorial。

如果您需要为应用的其他部分进行类似的缓存，那么此解决方案会很好。如果这对您来说是一个很大的开销，您可以像上面提到的那样保存在localStorage中。并在componentDidMount上阅读。

react router - 每个组件只调用一次ajax

1 个答案: