最近在做一个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数据时出现的错误，以后代码还是要更细心。
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
