React开发中遇到的问题

一.解决问题

2.React-router4 也就是react-router-dom的一切组件的使用

	/*
		1.withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入
		2.Authroute是组件
	*/
	Authroute = withRouter(Authroute);
	export default Authroute

3. react-redux的connect

/*
		1.Dashboard是组件
		2.mapStateToProps 是state的值
			const mapStateToProps = (state) =>{
				return {users:state.auth}
			}
		3.logout  是redux的action
	*/
	Dashboard = connect(mapStateToProps,{logout})(Dashboard);
	export default Dashboard;

3. 组件属性类型检测 prop-types

static propTypes = {
		name: PropTypes.string.isRequired,//检测字符串
		age:PropTypes.number.isRequired,//检测数字
		user:PropTypes.object.isRequired,//检测对象
		num:PropTypes.array.isRequired,//检测数组类型
		bool:PropTypes.bool.isRequired//检测布尔类型
		fu: PropTypes.func.isRequired,//检测函数（Function类型）
		Symbol: PropTypes.symbol.isRequired//ES6新增的symbol类型
	}

二.错误

(1).setSate的问题

1.Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

class Login extends React.Component {
	constructor(props){
		super(props);
		//在组件初始化可以直接操作this.state
		this.state={
			Odata:{}
		}
	}
	componentDidMount(){
		console.log('组件加载完毕！')
		axios.get("/data").then(function(res){
            if(res.status === 200 ){
            	console.log(res.data)
            	this.setState({
            		Odata:res.data
            	})
            }
        })
	}
}

上面的代码导致报错，因为this

有2种解决方式：

const that =this;

class Login extends React.Component {
	constructor(props){
		super(props);
		//在组件初始化可以直接操作this.state
		this.state={
			Odata:{}
		}
	}
	componentDidMount(){
		console.log('组件加载完毕！')
		const that = this ;
		axios.get("/data").then(function(res){
            if(res.status === 200 ){
            	that.setState({
            		Odata:res.data
            	})
            }
        })
	}
}

另一种是用箭头函数：

class Login extends React.Component {
	constructor(props){
		super(props);
		//在组件初始化可以直接操作this.state
		this.state={
			Odata:{}
		}
	}
	componentDidMount(){
		console.log('组件加载完毕！')
		axios.get("/data").then((res)=>{
            if(res.status === 200 ){
            	this.setState({
            		Odata:res.data
            	})
            }
        })
	}
}

2.Cannot read property ‘setState’ of null

constructor(props) {
		super(props);
		/*关键就是这里，把要使用this的函数  在构造函数中用bind方法传入this*/
		this.startFu = this.startFu.bind(this);
		this.state = {
			data:{}
		};
	}
	startFu(){
		this.setState({data:res.data})
	}

绑定this就可以

React开发中遇到的问题

猜你喜欢