Question

我在转换json数据以响应ajax请求的组件时遇到问题。我的json文件位于“ src / data / form-inputs.json”下。

form-inputs.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 link，可以看到它的运行情况。

转换json数据以响应具有Ajax请求的组件

1 个答案: