使用React开发过程中遇到的问题

好不容易晴了两天，帝都再成仙境。身在仙境，向往人间！

接触React差不多近两个月了，孤军奋战，前进缓慢，但是使用React确实给我带来了很大的便利，增快了开发速度。结合Node来搭建一个全栈项目几天就可以搞定，但是还是遇到了一些问题，总结之~

当导航切换特别快的时候，之前请求的数据出现了setState(...):Can only update a mounted or mounting component......的错误。

我出现这个问题的原因是我在constructor 初始化中增加了跳转路由的方法，所以在组件还没有setState之前就已经跳转路由了，解决方法有两个

1. 将constructor 中的方法放到componentDidMount 中去执行（不影响你的逻辑的前提下）；
2. 更优雅的解决方案就是使用redux-thunk去执行异步逻辑并将结果写入store，这样如果节点被unmount了也就不会收到通知了。

表单提交等路由跳转

首先我的路由配置的history是hashHistory ，页面内跳转就直接用的location.hash = "/path"; 的方式跳转，虽然说也可以，但是不好，改为了阮大神推荐的方式

1. 第一种方法是使用browserHistory.push


   import { browserHistory } from 'react-router'
   
   // ...
     handleSubmit(event) {
       event.preventDefault()
       const userName = event.target.elements[0].value
       const repo = event.target.elements[1].value
       const path = `/repos/{userName}/{repo}`
       browserHistory.push(path)
     },

    

2. 第二种方法是使用context对象。

   export default React.createClass({
   
     // ask for `router` from context
     contextTypes: {
       router: React.PropTypes.object
     },
   
     handleSubmit(event) {
       // ...
       this.context.router.push(path)
     },
   })

this.setState({data.info})多级对象的问题

react中state可能会出现多级对象的情况。

  getInitialState(){
        return { 
            data:{
                device_type:'ios',
                flag：false
            }
        }
    },

//更改state的时候不能直接
this.setState({
    data.flag:true,
})
//原因是setState中为一个对象，对象的键没有obj.key 的模式。所以应该使用 Object.assign来解决
//使用方式为

let _new = Object.assgin({},{this.state.data},{flag:true});
this.setState({data:_new})

Object.assgin的详细使用方法

ReactRouter 配置问题

解决方式：react-router  配置写成React组件。

或者

//如果你的配置是用一个变量存储的话，使用这种方式监听url 
Router.run(routes, Router.HashLocation, (Root) => {
  React.render(<Root/>, document.body);
});