Как результат get-запроса сохранить и передать для рендера в ReactDOM.render?

Question

[Вадим Ягофаров]

Вот код

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Form from "@rjsf/core";
import axios from 'axios';

  //Form = JSONSchemaForm.default;

  const onSubmit = ({ formData }) => console.log("Data submitted: ", formData);

  state = {
    scheme: []
  }
  
  const scheme =  axios.get(`http://localhost/lk-ssl/hs/json/new_student`.json)
        .then(res => {
          const schema= res.data;
          console.log(schema);
          this.setState({ scheme});
          return scheme;
      })
  
    
  
  
  ReactDOM.render((
    <Form schema={schema}
      onSubmit={onSubmit}/>),
      document.getElementById('app')
  );

Как результат get-запроса сохранить и передать для рендера в ReactDOM.render? Сейчас выходить ошибка

Failed to compile
./src/index.js
  Line 13:3:   'state' is not defined   no-undef
  Line 29:19:  'schema' is not defined  no-undef

Search for the keywords to learn more about each error.

Comments

[Алексей Уколов]

Search for the keywords to learn more about each error.

[Роман Андреевич]

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Form from "@rjsf/core";
import axios from 'axios';

const EaseForm = () => {
    const [ scheme, setScheme ] = useState()

    useEffect(() => {
        axios.get(`http://localhost/lk-ssl/hs/json/new_student`.json)
            .then(res => {
                const schema = res.data
                setScheme(schema)
            })
    })

    const onSubmit = ({ formData }) => {
        console.log(formData)
    }

    return(
        <Form
            schema={scheme}
            onSubmit={onSubmit}
        />
    )
}

ReactDOM.render(
    <EaseForm />,
    document.getElementById('app')
)

[Вадим Ягофаров]

Роман Андреевич,
Json приходит валидный, но прилетает ошибка.

[TRNER]

Вадим Ягофаров, Попробуй
const [ scheme, setScheme ] = useState({});

[Вадим Ягофаров]

TRNER, попробовал, спасибо. отрисовалась форма, но она не заполняется, как будто сразу обновляется(очищается) и уведомления увеличиваются в консоли) уже за 20 тыс перевалило

[TRNER]

Вадим Ягофаров, Наш useEffect ушел в рекурсию, так как он триггерит обновление стейта, а обновление стейта, в свою очередь, триггерит вызов эффекта.

Можно передать вторым аргументом в useEffect нашу схему, тогда реакт будет сравнивать ее текущее значение с предыдущим при каждом вызове эффекта и выполнять его, только если эти значения различаются.

useEffect(() => {
        axios.get(`http://localhost/lk-ssl/hs/json/new_student`.json)
            .then(res => {
                const schema = res.data
                setScheme(schema)
            })
    }, [schema])

[Вадим Ягофаров]

TRNER, не помогло

[TRNER]

Вадим Ягофаров, Тут уже сложно сказать не глядя на код, можешь залить на codesandbox.io минимальный (не)рабочий вариант и дать ссылку?

[Вадим Ягофаров]

TRNER, могу, только json у меня идет из 1с, как его можно смоделировать? Я сегодня залью и отпишусь. пока проблему решил, но мне интересно увидеть более правильное решение. Вот код который работает на данный момент

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import Form from "@rjsf/core";



	console.log(Form);

	const onSubmit = ({ formData }) => console.log("Data submitted: ", formData);
	let yourForm;
	

	(async () => {
		const data = await fetch('http://localhost/lk-ssl/hs/json/new_student')   // дописать параметры типа /url?param1=100
		const schema = await data.json();
		//console.log(schema); 

		ReactDOM.render(
		React.createElement(
			Form,
			{ 
				schema: schema,
				onSubmit: onSubmit
			}
		),
		document.getElementById("app"));
	})();