在现有的i标签字段中调用json数据

编程问答 2022-08-23

问题描述

[
    { "id": "1","First Name": "John"
    }
]
import React from 'react';
import './Mcontent.css';
import editProfiledata from './edit-profile-data.json';

class Mcontent extends React.Component {
  render() {
    return(

       <body>

        <div className="Box1">

          <form method='post' id='editprofile' action=''>

              <h1> Edit Profile </h1> <br/><br/>


              <div className="name1">
                <label for='Fname'>Name:</label><br/>

                {editProfiledata.map(profileinfo => (
                    <input type='text' name='Firstname' id='Fname1'                         
                      maxLength={10} placeholder='First name'                               
                      required key={profileinfo.id} value=                                  
                      {profileinfo.FirstName} />
                ))}
                 <br/><br/>

Input field for first name

我正在为我的网站创建一个编辑配置文件表单，我希望能够从json文件中调用数据以测试表单。我尝试使用上面的代码，但似乎无法正常工作

解决方法

检查是否已安装json-loader ：），然后可以使用

import editProfiledata from './edit-profile-data.json';

或

import editProfiledata from './edit-profile-data';

您可以通过以下方式安装它

npm install --save-dev json-loader
calling-conventionformsjsonreactjsreactjs