Блог

Я следую измененному учебнику по формам JSON, но сталкиваюсь с проблемами при добавлении собственного кода для отправки данных формы в конечную точку REST.

Форма загружается нормально, и я могу заполнить ее данными.

Я получаю Необработанный отказ (ошибка типа): Не удалось выполнить выборку при нажатии на кнопку «Отправить». Я проверяю журналы службы REST, и запрос не доходит до моего контроллера.

Это мое App.js код:

 import './App.css';
import { person } from '@jsonforms/examples';
import {
  materialRenderers,
  materialCells,
} from '@jsonforms/material-renderers';
import React, { useState } from 'react';
import { JsonForms } from '@jsonforms/react';
import { Button } from 'react-bootstrap';

const schema = person.schema;
const uischema = person.uischema;
const initialData = person.data;    

function App() {

  const [data, setData] = useState(initialData);
    
  const sendData = () => 
    fetch('http://localhost:8080/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

  return (
    <div className='App'>
      <JsonForms
        schema={schema}
        uischema={uischema}
        data={data}
        renderers={materialRenderers}
        cells={materialCells}
        onChange={({ data, _errors }) => setData(data)}
      />
      <Button onClick={() => sendData()} color='primary'>
        Submit
      </Button>
    </div>
  );
}

export default App;
 

Конечная точка REST работает и отлично отвечает на запросы …

 curl --location --request POST 'http://localhost:8080/message' 
--header 'Content-Type: application/json' 
--data-raw '{
  "name": "John Doe",
  "birthDate": "1985-06-02",
  "personalData": {
    "age": 34,
    "height": 5.9
  },
  "occupation": "Programmer"
}'
 

Есть какие-нибудь идеи, что может быть не так?

не могли бы вы, пожалуйста, попробовать этот способ? Если это еще не решено, может возникнуть проблема с ошибкой CORS. Вам нужно включить cors в вашем API, вы можете узнать больше о CORS

Пример:

     const sendData = async () =>  {
        const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        };
        const response = await fetch('http://localhost:8080/message', requestOptions);
        const data = await response.json();
        console.log(data)
     }