React.js：setState 方法将变量设置为字符串而不是对象......有解决方法吗？答案

【问题标题】：React.js: setState method setting variable to a string instead of object... is there a workaround?React.js：setState 方法将变量设置为字符串而不是对象......有解决方法吗？
【发布时间】：2018-06-09 00:53:17
【问题描述】：

我正在尝试从 express.js 中获取一个简单的 JSON 元素。我正在尝试让 React 将其分配给前端的状态变量。我正在使用此代码：

componentDidMount() {
    fetch("/user")
    .then(response => response.json())
    .then(result => this.setState({myUser:result}))
}

但是当我在这个 setState 命令之后运行 typeof myUser 时，它显示的是字符串而不是对象。我尝试过使用 JSON.parse() 等。但要么我收到错误，要么它继续将数据分配为字符串而不是 JSON。我需要在这个 fetch-then 上下文中使用什么样的语法来强制数据分配为 JSON？

I have read this link:

使用此代码：

componentDidMount(){
  fetch('https://abx.com/data/tool.json').then(response =>{
    if (!response.ok) throw Error('Response not ok')

    return response.json(); // This is built in JSON.parse wrapped as a Promise
  }).then(json => {
    this.setState({"sections" : json});
  }).catch(err =>{
    console.log(err);
  });
}

但这并不能解决问题。我直接在我的应用程序中逐字运行此代码。当我在变量上运行 typeof 时，它说的是字符串而不是对象。我查看了 Stack Overflow 上的其他帖子，但没有看到解决方案。

【问题讨论】：

这不正常，您正在正确获取，第二个示例与您的结构不同。当您查看第二个 .then 方法而不是设置状态时，输出是什么？ .then( result => console.log( typeof result ) ); 或者这个输出是什么：.then( console.log );
另外，像这样设置正确的状态后，你能用 React 开发工具看到什么吗？您是否有可能收到错误响应？
你能分享一下你的渲染函数是什么样子的吗？这是一个很好的站点：codesandbox.io/s/new this.setState 是异步的，因此您可能会尝试通过在幕后做出反应来在调度之前访问更改。我通常在组件内部遵循的模式是if (state not ready) { render Loading }，然后在触发下一个状态时呈现你想要的。

标签： json string reactjs fetch setstate

【解决方案1】：

我发现出了什么问题（经过数小时的试验）：在 server 端，我正在使用字符串和变量连接创建一个“本土”JSON 对象。我还尝试通过这样做来创建 JSON 对象：

var str = "name:" + name + ", department:" + department var user = {str};

这两者都没有以微妙的方式工作......尽管在客户端尝试了不同类型的小工具，但我无法让 React 将数据解释为 JSON 对象。但后来我有了一个想法，像这样在服务器端（在 Express.js 中）构造 JSON：

var user = {}; user["name"] = name; user["department"] = department;

这立即清除了服务器端和客户端的问题。在 React 中使用 setState() 时，它现在将值设置为对象（这一直是目标）。

我认为这对其他人可能有用...如果 React 似乎无法理解 JSON，那么它可能是从服务器以一种略微不正确的格式发送的。

【讨论】：

你为什么要这样创建你的对象？最后它看起来像{str: "name:foo, department:moo"} 这不是你想要的。你以某种方式修复了它，但首先你为什么不这样定义你的用户：const user = { name: name, department: department, } 所以，我认为这不是 React 问题。毕竟你所谓的 JSON 不是真正的 JSON。您似乎正在尝试在这里设置一个对象。
正确。 JSON 没有在服务器上正确构建，这就是 React 难以通过 setState() 将其分配为对象的未知/意外原因。这解决了它：var user = {}; user["name"] = name; user["department"] = department; 我还必须探索您指出的语法：const user = { name: name, department: department, } 。