Правильный способ Реагировать на сообщение с UUID и вложенным объектом в полезной нагрузке JSON?

Question

Мое серверное приложение принимает int, выполняет простую математику и возвращает int как приложение Content-Type / json.API был протестирован с Postman и работает правильно.

Я ищу правильный способ обработки Axios POST с полезной нагрузкой JSON, которая включает UUID с объектом, вложенным под ним.Как и предполагалось, я добавил [''] вокруг UUID, чтобы хорошо играть с React.Если я нажимаю «Опубликовать» без ввода значения, мой сервер возвращает int для «current_value».Если я введу число в поле '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 }
}