Javascript 电子反应样板-路线变化和状态

我正在使用electron react样板文件启动一个小型应用程序，用于任务跟踪，使用NeDB进行持久性

当我第一次启动应用程序并更改第一条路线时， @@路由器/位置更改被触发，但我的状态为空，然后在该操作（加载注释-我定义的操作）被触发后（加载数据-服务器请求）-第一次出现小错误闪烁（未定义变量-我的状态为空，因为数据被加载到加载注释-请求操作中，该操作“触发”加载（数据加载完成后的操作）

知道为什么会发生这种情况吗？如何以正确的方式填充路线更改时的状态

编辑

actions/project.js

reducers/projectReducer.js

containers/projectDetailContainer.js

import React，{PropTypes，Component}来自'React'；
从“redux”导入{bindActionCreators}；
从“../components/projects/ProjectDetail”导入项目详细信息；
从'react redux'导入{connect}；
从“../actions/project”导入*作为项目操作；
类ProjectDetailContainer扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
}
componentDidMount（）{
this.props.dispatch（ProjectActions.getProjectRequest（this.props.params.id））；
}
render（）{
返回(
);
}
}
ProjectDetailContainer.need=[（参数）=>{
返回Actions.getProjectRequest.bind（null，params.id）（）；
}];
ProjectDetailContainer.contextTypes={
路由器：React.PropTypes.object，
};
函数MapStateTops（存储）{
返回{
项目：（store.projectsReducer.project）
};
}
导出默认连接（MapStateTops）（ProjectDetailContainer）；

组件/ProjectDetail.js

import React，{Component}来自'React'；
导出默认类ProjectDetail扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
}
render（）{
返回(
项目详情
{（this.props.singleProject[0].projectName）}
);
};
}

routes.js

从“React”导入React；
从“react router”导入{Route，IndexRoute}；
从“./containers/App”导入应用程序；
从“./containers/HomePage”导入主页；
从“./集装箱/CounterPage”导入CounterPage；
从“./containers/Dashboard”导入仪表板；
从“./containers/NewProjectContainer”导入NewProjectContainer；
从“./containers/ProjectsListContainer”导入ProjectsListContainer；
从“./containers/ProjectDetailContainer”导入ProjectDetailContainer；
导出默认值(
);

仔细阅读您的问题和代码后，我发现您问题的关键部分是：

知道为什么会发生这种情况吗？如何以正确的方式填充路线更改时的状态

嗯，您可能需要在

routes.js

中使用组件。本主要文档将有助于：

此外，如果您正在寻找其他产品，以下内容也可能会有所帮助：

---

在阅读了您的问题和代码之后，我可以看到您问题的关键部分是：

知道为什么会发生这种情况吗？如何以正确的方式填充路线更改时的状态

嗯，您可能需要在

routes.js

中使用组件。本主要文档将有助于：

此外，如果您正在寻找其他产品，以下内容也可能会有所帮助：

---

您需要包括一些代码以供他人帮助：）我已添加了代码为的编辑部分：）您需要包括一些代码以供他人帮助：）我已添加代码为的编辑部分：）

import * as ActionTypes from '../constants/ActionTypes';

import * as axios from 'axios';
import Alert from 'react-s-alert';


const baseURL = 'http://localhost:3000';

export function addProject(project) {
  return {
    type: ActionTypes.ADD_PROJECT,
    project
  };
}

export function addProjectRequest(project) {


  return dispatch => {
    dispatch(addProject(project));

        axios.post(`${baseURL}/api/addProject`, project)
        .then(function (response) {

          Alert.success('Test message 3', {
           position: 'top-right',
          });

        })
        .catch(function (response) {
        console.log(response);
        });


  };
}

import * as ActionTypes from '../constants/ActionTypes';

const initialState = { projects: [], project:null};

const projectsReducer = (state = initialState, action) => {
  switch (action.type) {


    case ActionTypes.ADD_PROJECT :

    return {
      projects: [{
        projectName: action.event.projectName,
        projectWorkOrder: action.event.projectWorkOrder,
        projectClient: action.event.projectClient,
        projectDescription: action.event.projectDescription,
        projectStatus: action.event.projectStatus,
        _id: action.event._id,
      }, ...state.projects],
      project: state.project

     };



    case ActionTypes.ADD_PROJECTS :

      return {

        projects: action.projects,
        project: state.project,
      };

    case ActionTypes.GET_PROJECT :

        return {

          projects: state.projects,
          project: action.project
        };

    default:
      return state;
  }
};

export default projectsReducer;

import React, { PropTypes, Component } from 'react';
import { bindActionCreators } from 'redux';
import ProjectDetail from '../components/projects/ProjectDetail';
import { connect } from 'react-redux';
import * as ProjectActions from '../actions/project';


class ProjectDetailContainer extends Component {
  constructor(props, context) {
    super(props, context);
  }

  componentDidMount() {
    this.props.dispatch(ProjectActions.getProjectRequest(this.props.params.id));
  }


  render() {
    return (
      <div>
          <ProjectDetail singleProject={this.props.project}  />
      </div>
    );
  }
}


ProjectDetailContainer.need = [(params) => {

  return Actions.getProjectRequest.bind(null, params.id)();
}];

ProjectDetailContainer.contextTypes = {
  router: React.PropTypes.object,
};


function mapStateToProps(store) {


  return {

      project: (store.projectsReducer.project)
  };
}



export default connect(mapStateToProps)(ProjectDetailContainer);

import React, { Component } from 'react';


export default class ProjectDetail extends Component {

  constructor(props, context) {
   super(props, context);


 }


  render() {

    return (
         <div>
          <h1>Project details</h1>
          <div>{(this.props.singleProject[0].projectName)}</div>

         </div>
    );
  };
}

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import HomePage from './containers/HomePage';
import CounterPage from './containers/CounterPage';

import Dashboard from './containers/Dashboard';

import NewProjectContainer from './containers/NewProjectContainer';
import ProjectsListContainer from './containers/ProjectsListContainer';
import ProjectDetailContainer from './containers/ProjectDetailContainer';

export default (
  <Route path="/" component={App}>
    <IndexRoute component={Dashboard} />
    <Route path="/counter" component={CounterPage} />
    <Route path="/new-project" component={NewProjectContainer} />
    <Route path="/projects-list" component={ProjectsListContainer} />
    <Route path="/projects/:id" component={ProjectDetailContainer} />
  </Route>
);