Question

我有一条路线：/ events和一条子路线/ events /：id

我创建了一个reducer和一个用于获取所有事件并将其显示在eventsPage中的动作。

这部分工作正常。

现在从事件页面上，当我单击一个事件时，我试图导航到/ events /：id

在events /：id页面中，我创建了一个在componendDidMount回调中调用的动作，然后从那里显示事件。当我从列表中单击指向事件详细信息页面的链接时，它可以正常工作。现在，我正在寻找在服务器端执行请求的方法，因此当我完全重新加载页面时，仍然显示所选事件。

这是我的events /：id页面组件

import React, { Component } from 'react';

import {connect} from 'react-redux';
import {fetchEvent} from '../actions/eventsActions'

class EventDetail extends Component {
    constructor(props){
        super(props);
        this.state = {
            event: null
        }

    }
    componentDidMount(){
        this.props.fetchEvent(this.props.match.params.slug).then(response => {
            this.setState({
                event: response.event
            })
        }).catch(error => {
            console.log('error', error);
        });
    }

    render() {
        return (
            <div>
                {JSON.stringify(this.state)}
            </div>
        );
    }
}
function loadData(store){    

}

export default {
    component: connect(null, {fetchEvent})(EventDetail),
    loadData
};

我的fetch_event操作

import {FETCH_EVENT} from './types';
export const fetchEvent = (event_slug) => async(dispatch, getState, api) => {
    const res = await api.get(`/api/events/${event_slug}`);
    dispatch({
        type: FETCH_EVENT,
        payload: res.data
    })
    return res.data;
}

我该如何解决？

服务器端渲染反应问题渲染子路由

0 个答案: