Question

我的服务器端应用程序接受一个int，做一些简单的数学运算，并返回一个int作为Content-Type application / json。 api已经过Postman测试并且工作正常。

我正在寻找使用JSON有效负载处理Axios POST的正确方法，该有效负载包含一个UUID，其下面嵌套有一个对象。正如所建议的那样，我在UUID周围添加了['']以便与React很好地配合。如果我在没有输入值的情况下单击“发布”，我的服务器将返回“current_value”的int。如果我在字段'current_value'中输入一个数字，则返回一个字符串，例如，4 + 2 = "42"。

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: event.target.value });
    console.log(event.target.value);
  };

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

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

  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;

Answer 1

为了向@GuilhermeLemmi提供帮助，我已经找到了解决我的初始问题和处理响应问题的答案，其中有问题的项目包含减号-。将我的UUID包装在[] data对象中是没有必要的，但我确实需要用单引号将其包装起来。在返回方面，我需要将响应包装在['']中，但将其保留为对象，不 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;

Answer 2

尝试像下面那样逃避你的uuid，它应该有效：

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

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

2 个答案: