React中Axios响应JSON赋值变量时JSON.parse/stringify失效报错

嘿，我看你遇到的其实是个很常见的小误区——Axios默认会自动把JSON格式的响应解析成JavaScript对象，所以你完全不需要再用JSON.parse()去处理response.data.message啦！

你贴出来的response.data.message本身就是一个完整的JS对象，这时候如果强行用JSON.parse()，相当于先把这个对象转成字符串"[object Object]"，再去解析这个毫无意义的字符串，不仅起不到作用，还会导致后续获取length这类操作出错，而且用+拼接字符串输出时，对象会被自动转成[object Object]，看起来像是出了问题。

给你修正后的代码：

axios.get('api/v0/graph/instance/'+ this.props.selectedNode )
.then(response => {
    console.log('Starting of tree node message', response.data.message);
    // 直接赋值即可，response.data.message已经是解析好的对象
    var RtnJSONVal = response.data.message;
    // 用逗号分隔参数，控制台会展示完整的对象结构，方便调试
    console.log('value of the message variable is', RtnJSONVal);
    // 原对象本身没有length属性，你要的应该是ref-in数组的长度
    console.log('ref-in array length:', RtnJSONVal['ref-in'].length);
    var fields = RtnJSONVal;
    // 继续你的后续逻辑...
})

再给你两个调试小技巧：

• 查看对象内容时，别用+拼接字符串，改用console.log(说明文本, 对象)，浏览器控制台会允许你展开对象查看所有属性；
• 如果确实需要把对象转成字符串（比如存入localStorage），再用JSON.stringify(对象)，而不是反过来用JSON.parse。

内容的提问来源于stack exchange，提问作者Satish Narasimha