reactjs - 使用 UUID 和 JSON 有效负载中的嵌套对象反应 axios 帖子的正确方法？

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;

标签： reactjsaxios

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;