好不容易晴了两天,帝都再成仙境。身在仙境,向往人间!
接触React差不多近两个月了,孤军奋战,前进缓慢,但是使用React确实给我带来了很大的便利,增快了开发速度。结合Node来搭建一个全栈项目几天就可以搞定,但是还是遇到了一些问题,总结之~
当导航切换特别快的时候,之前请求的数据出现了setState(...):Can only update a mounted or mounting component......的错误。
我出现这个问题的原因是我在constructor 初始化中增加了跳转路由的方法,所以在组件还没有setState之前就已经跳转路由了,解决方法有两个
- 将constructor 中的方法放到componentDidMount 中去执行(不影响你的逻辑的前提下);
- 更优雅的解决方案就是使用redux-thunk去执行异步逻辑并将结果写入store,这样如果节点被unmount了也就不会收到通知了。
表单提交等路由跳转
首先我的路由配置的history是hashHistory ,页面内跳转就直接用的location.hash = "/path"; 的方式跳转,虽然说也可以,但是不好,改为了阮大神推荐的方式
- 第一种方法是使用
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) },
- 第二种方法是使用
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})
ReactRouter 配置问题
解决方式:react-router 配置写成React组件。
或者
//如果你的配置是用一个变量存储的话,使用这种方式监听url Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root/>, document.body); });
文章评论