记一次react项目排bug

　　最近在做一个react项目，使用前后端分离的形式，前端发送请求得到后端响应后重新进行渲染。

　　在一次重新渲染时，react总是报错：TypeError: Cannot read property of .. undefined，通过控制台输出发现state中的user未被正确的赋值，那么到底是哪一步除了错误呢。

　　首先对代码进行测试，发现代码总是在constructor函数的this.setState的语句就会产生错误，

　　

axios({
method: 'post',
url: preURL + '/user/getUserInfo',
dataType: 'json',
headers: {
'Content-Type': 'application/json'
}
}).then((response) => {
console.log("header getUserInfo response:", response);
if (response.data.code === "200") {
this.setState({user: response.data.data});
} else {
Modal.error({title: '用户信息错误', content: '无法获取用户信息，请重新登录！'});
hashHistory.push('/login');
}
}).catch((error) => {
console.log("getUserInfo error:", error);
Modal.error({title: '网络错误', content: '无法获取用户信息，请重新登录！'});
hashHistory.push('/login');
});

　　由于使用了ES6的箭头函数，使用this应该不会出现问题，经过关键词axios setstate TypeError: Cannot read property of undefined关键词搜索后，发现有建议不把ajax请求放在constructor一说，但是毕竟是建议，在尝试将ajax请求放在独立的函数中时仍然报错，期间也尝试过将setSate单独分离出来作为一个函数，但是报错依然。

　　最后想起来检查response的格式问题，发现原来是自己搭建用于测试的后台传送数据出了问题，由于使用json格式来进行传输，后端代码在格式化时将response中的data少用了一个单引号来包裹，这样就导致了前端从response中读取data读取不到的问题，由于少了一个符号，但从response的整体结构很难看出错误。

　　所以在以后的开发中，遇到bug首先要将bug具体化，具体在哪一步除了问题，这一次就是因为本以为是在setState除了问题，结果是因为在response解析出data数据时出现的错误，以后代码还是要更细心。

转载于:https://www.cnblogs.com/xiaobaihaha/p/8577162.html