Javascript 需要从json数据中填写表单数据。不出现

事情并不重要，因为我也在用jsfiddle进行尝试，因此排除了不是React.JS导致表单无法填充的可能性。
我有一个文件中的数据。它应该是json格式，目标是填充表单字段 这里有一把小提琴：

虽然使用一些映射函数或者表单的ID会很好，但我会满足于任何只在表单上循环的东西。如果需要，我可以更改表格。我计划有ID和姓名

表格：

手动设置document.getElementById有效的FamilyName。。。 但是数据的循环不会填充表单字段

通过console.log，我可以看到键和值，但我不知道formdata应该如何使用我的id=“importantForm”表单，它需要吗？

formdata（）

不是用来在数据结构和表单之间绑定数据的方法。这就是创建UI框架/库（React、Vue、Angular等）的目的

FormData

旨在提供一种构建数据结构的方法，可以：

它主要用于发送表单数据，但也可以使用 独立于表单以传输键控数据。这个 传输的数据与表单的submit（）方法的格式相同 如果表单的编码类型设置为，则将用于发送数据 多部分/表单数据

但是，手动设置表单字段值非常简单：

var json = {family1Name: "jack", family1Relationship: "brother", family1Phone: "00045555000"};

var form = $("#importantForm");

for (var key in json) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)  
    input.val(json[key]);
  }

FormData（）

不是用来在数据结构和表单之间绑定数据的方法。这就是创建UI框架/库（React、Vue、Angular等）的目的

FormData

旨在提供一种构建数据结构的方法，可以：

它主要用于发送表单数据，但也可以使用 独立于表单以传输键控数据。这个 传输的数据与表单的submit（）方法的格式相同 如果表单的编码类型设置为，则将用于发送数据 多部分/表单数据

但是，手动设置表单字段值非常简单：

var json = {family1Name: "jack", family1Relationship: "brother", family1Phone: "00045555000"};

var form = $("#importantForm");

for (var key in json) {
    var selector = `input[name="${ key }"], textarea[name="${ key }"]`
    var input = $(form).find(selector)  
    input.val(json[key]);
  }

示例JSON

const data = {
    family1Name: "Jack",
    family1Relationship: "None",
    family1Phone: "999"
  };

并将以下jsx放入

标记中，非常简单

{Object.keys(data).map(k => (
      <div className="form-group">
        <label htmlFor={k}>{k}</label>
        <input
          type="text"
          className="form-control"
          name={k}
          id={k}
          value={data[k]}
        />
      </div>
    ))}

{Object.keys（data.map）（k=>(
{k}
))}

这是输出

示例JSON

const data = {
    family1Name: "Jack",
    family1Relationship: "None",
    family1Phone: "999"
  };

并将以下jsx放入

标记中，非常简单

{Object.keys(data).map(k => (
      <div className="form-group">
        <label htmlFor={k}>{k}</label>
        <input
          type="text"
          className="form-control"
          name={k}
          id={k}
          value={data[k]}
        />
      </div>
    ))}

{Object.keys（data.map）（k=>(
{k}
))}

这是输出

---

哦，我明白了，明白了，

“$”在我的react页面中没有定义

我知道$不仅仅是用于jquery，而且我如何使用它？我们还可以从json文件中提取它，并将其加载到状态并呈现？@AaminKhan-目前我从本地存储中提取数据，作为json字符串存储，但是目前的解决方案我有一个问题，因为我猜$是jquery？@JeremyMiller:在react中使用jquery不是一个好的做法，我已经为您创建了一个代码沙盒，请检查它是否满足您的需要哦，我明白了，明白了，

“$”在我的react页面中没有定义

，我知道$不仅仅是用于jquery，但是我该如何使用它呢？我们也可以从json文件中提取数据并将其加载到状态并进行渲染？@AaminKhan-目前我从本地存储中提取数据，因为我存储为json字符串，但当前的解决方案我有个问题，因为我猜$是jquery？@JeremyMiller:在react中使用jquery不是一个好的做法，我已经为您创建了一个代码沙盒，请检查它是否满足您的需要