Reactjs 使用JSON负载中的UUID和嵌套对象来响应axios post的正确方法？

我的服务器端应用程序接受一个int，进行一些简单的计算，并返回一个int作为内容类型application/json。该api已经过Postman测试，运行正常

我正在寻找处理Axios POST的正确方法，该POST具有JSON负载，该负载包括一个UUID，该UUID下面嵌套了一个对象。正如建议的那样，我在UUID周围添加了

[''']

，以便更好地使用React。如果我单击“发布”而不输入值，我的服务器将返回“当前值”的整数。如果我在“当前值”字段中输入一个数字，则返回一个字符串，例如4+2=

“42”

import React，{Component}来自'React'；
从“axios”导入axios；
类Post扩展组件{
构造函数（）{
超级（）；
此.state={
当前_值：0
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=事件=>{
this.setState（{current_value:event.target.value}）；
日志（event.target.value）；
};
handleSubmit=事件=>{
event.preventDefault（）；
轴心柱http://my.server.url', {
福：“酒吧”，
['e0ea641b-3de4-4a76-857d-11da9352698a']：{current_value:this.state.current_value}
})
。然后（响应=>{
this.setState（{current_value:response.data.current_value}）；
log（JSON.stringify（response.data））；
});
};
render（）{
返回(
输入号码：
邮递
输出编号：{this.state.current_value}
);
}
}
导出默认帖子；

试着像下面这样逃离你的uuid，它应该可以工作：

{
    foo: 'bar',
    ['e0ea641b-3de4-4a76-857d-11da9352698a']:{ current_value: this.state.current_value }
}

---

通过@guilhermelmi的点头帮助，我找到了一个答案，解决了我最初的问题和处理问题，其中问题项包含负号

-

。在

数据

对象的

[]

中包装我的UUID是没有必要的，但我确实需要用单引号将它包装起来。在返回端，我确实需要将响应包装在

['']

中，但将其作为对象，不要

JSON.stringify（）

它。现在一切都很顺利

import React, { Component } from 'react';
import axios from 'axios';

class Post extends Component {
  constructor() {
    super();

    this.state = {
      current_value: 0
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = event => {
    this.setState({ current_value: JSON.parse(event.target.value)});
    console.log(event.target.value);
  };

  handleSubmit = event => {
    event.preventDefault();

    const data = {
      foo: 'bar',
      'e0ea641b-3de4-4a76-857d-11da9352698a': {
    current_value: this.state.current_value
      }
    };

    console.log(data);

    axios.post('http://my.server.url', data)
      .then(response => {
        const obj = response.data;
        this.setState({ current_value: obj['e0ea641b-3de4-4a76-857d-11da9352698a'].current_value });
        console.log(obj['e0ea641b-3de4-4a76-857d-11da9352698a'].current_value);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Input Number:
            <input type="number" name="current_value" onChange={this.handleChange} />
          </label>
          <button type="submit">Post</button>
        </form>
        <div>
            Output Number: { this.state.current_value }
        </div>
      </div>
    );
  }
}

export default Post;

import React，{Component}来自'React'；
从“axios”导入axios；
类Post扩展组件{
构造函数（）{
超级（）；
此.state={
当前_值：0
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=事件=>{
this.setState（{current_value:JSON.parse（event.target.value）}）；
日志（event.target.value）；
};
handleSubmit=事件=>{
event.preventDefault（）；
常数数据={
福：“酒吧”，
‘e0ea641b-3de4-4a76-857d-11da9352698a’：{
当前_值：this.state.current_值
}
};
控制台日志（数据）；
轴心柱http://my.server.url",数据)
。然后（响应=>{
const obj=response.data；
此.setState（{current_value:obj['e0ea641b-3de4-4a76-857d-11da9352698a'].current_value}）；
控制台日志（obj['e0ea641b-3de4-4a76-857d-11da9352698a']当前_值）；
})
.catch（（错误）=>{
console.log（错误）；
});
};
render（）{
返回(
输入号码：
邮递
输出编号：{this.state.current_value}
);
}
}
导出默认帖子；

没问题@DanielBell，尝试一下，接受并投票决定答案，让我们知道它是否有效！谢谢你的回复。这在一定程度上起了作用，因为它进行编译，并且UUID作为字符串发送到上游。然而，我的

.then

语句似乎将“current_value”转换为字符串。如果我包装负载的这一部分

{current_value:JSON.parse（this.state.current_value）}

它解决了大部分问题，但是如果我在没有输入数字的情况下单击“提交”，我会得到一个Javascript错误。这很奇怪，因为您在构造函数中将默认this.state.current_值定义为0，它应该作为JSON.parse（0）工作等于0。。。也许在用户输入号码之前，onChange处理程序就被触发了？尝试在handleChange中添加一个控制台日志来检查！一切都很好，除了：重新加载->单击“提交”（状态为0）它可以工作。再次单击“提交”（不输入数字），我得到

react dom.development.js:244未捕获的语法错误：JSON中的意外标记u位于位置0

——实际上，我得到了两次错误。我看到了。。。因此，在then块的状态中似乎设置了错误的值。您是否尝试记录response.data.current_值以查看结果？另外，在post负载或then响应中，您在哪里使用JSON.parser（）？

import React, { Component } from 'react';
import axios from 'axios';

class Post extends Component {
  constructor() {
    super();

    this.state = {
      current_value: 0
    };

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange = event => {
    this.setState({ current_value: JSON.parse(event.target.value)});
    console.log(event.target.value);
  };

  handleSubmit = event => {
    event.preventDefault();

    const data = {
      foo: 'bar',
      'e0ea641b-3de4-4a76-857d-11da9352698a': {
    current_value: this.state.current_value
      }
    };

    console.log(data);

    axios.post('http://my.server.url', data)
      .then(response => {
        const obj = response.data;
        this.setState({ current_value: obj['e0ea641b-3de4-4a76-857d-11da9352698a'].current_value });
        console.log(obj['e0ea641b-3de4-4a76-857d-11da9352698a'].current_value);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>Input Number:
            <input type="number" name="current_value" onChange={this.handleChange} />
          </label>
          <button type="submit">Post</button>
        </form>
        <div>
            Output Number: { this.state.current_value }
        </div>
      </div>
    );
  }
}

export default Post;