преобразовывать данные json для реагирования компонентов на запросы ajax

Question

У меня проблема с преобразованием данных json для реагирования компонентов на запросы ajax.Мой файл json находится в папке "src / data / form-input.json".

Содержимое form-input.json равно

{
  "form_inputs": [
    {
        "label": "Sender Email",
        "name": "sender_mail",
        "type": "email",
        "value": null,
        "rules": "required|min:3|max:64",
        "options": [],
        "default_value": null,
        "multiple": false,
        "readonly": false,
        "placeholder": "Sender Email",
        "info": "Example value of how to fill the input"
    }
  ]

}

В "src / components / form.js" находится form.js файл, который преобразует данные json в React.js компоненты.Код form.js:

import React, { Component } from 'react';

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            form_inputs: []
        };
     }

    componentDidMount() {
        fetch('../test-json/form-inputs.json')
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                  isLoaded: true,
                  form_inputs: result.form_inputs
             });
        });
}

render() {
    const {isLoaded, form_inputs} = this.state;
    if(!isLoaded) {
        return <div>Loading...</div>
    }else{
        return (
            <div>
                <ul>
                    {form_inputs.map(form_input => (
                        <li>
                            {form_input.label}
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
  }

}

export default Form

Пожалуйста, кто-нибудь может мне помочь с этой проблемой?Заранее большое спасибо!

Answer 1

Импорт вашего файла JSON. Нет необходимости анализировать его, интерпретатор javascript автоматически проанализирует его для вас. Вам больше не нужно состояние в вашем компоненте. Просто зациклите импортированный JSON.

import React from "react";
import ReactDOM from "react-dom";

import formData from "./formData.json";

function App() {
  return (
    <div className="App">
      <ul>
        {formData.form_inputs.map(form_input => (
          <React.Fragment>
            <label for={form_input.label}>{form_input.label}</label>
            <input
              key={form_input.label}
              id={form_input.label}
              type={form_input.type}
              name={form_input.name}
              defaultValue={form_input.default_value}
              placeholder={form_input.placeholder}
            />
          </React.Fragment>
        ))}
      </ul>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Вот ссылка codesandbox , чтобы увидеть ее в действии.