Question

我有一个反应应用程序，我试图根据从redis缓存调用的数据生成路由。

我正在使用https://github.com/ayroblu/ssr-create-react-app-v2

我有一个路径组件循环遍历this.props.pages并创建如下的路由：

class Routes extends Component {

  getRoutes(){
    let container = null;
    const routes = []

    /**
     *  We use a switch statement because the Routes component 
     *  attribute wont take a string so we need to call
     *  the object that we import i.e. HomePage
     */ 
    forEach(this.props.pages, page => {
      switch(page.template){
        case 'home':
          container = HomePage 
          break;
        case 'about':
          container = AboutPage 
          break;
        default:
          throw new Error("No page container matching page's template")
          return;
      }

      routes.push(<Route path={`${page.path}`} component={container} key={key}/>)
    })

    return routes;

  }

  render() {
    return (
      <Switch>
        {this.getRoutes()}
        <Route component={NoMatch}/>
        }
      </Switch>
    )
  }
}

我有一个页面缩减器，它从redis缓存中异步获取路由的页面数据，如下所示：

import { SET, RESET } from '../types/page'
import getInitialState from './../../server/initialState'

async function getInitialStateFromCache() {
    const initialState = await getInitialState();

    const {pages} = initialState[0]

    return pages
}

const initialState = getInitialStateFromCache()


export default function reducer(state=initialState, action) {
  switch (action.type) {
    case SET:
      return Object.assign({}, state, action.payload)
    case RESET:
      return {...initialState}
    default:
      return state
  }
}

当在我的路径组件中调用第一个渲染时，this.props.pages未定义，因此请求的页面404然后在客户端中显示第二个渲染。这意味着当我查看页面源时，内容没有被服务器端呈现。

如何延迟第一次渲染，以便在需要时定义this.props.pages？

Answer 1

如何延迟第一次渲染，以便在需要时定义this.props.pages？

有很多方法可以做到。一种方法是不立即致电ReactDOM.render。代替：

有index.html静态显示加载程序
应用入口点加载数据
加载数据后，请致电ReactDOM.render。

在reducer中异步设置initialState

1 个答案: