React - 渲染复杂的 json 数据

Question

我刚刚开始使用 React，我有一个用例，我需要显示已经从 API 获取的表单数据。 表单数据相当复杂，而且我在使用 JSX 时也遇到了困难。 数据可以在这里找到 - https://stackblitz.com/edit/react-nhjmzv

想法是分两个部分显示数据，每个部分都有标题，标题下方显示表单标签及其相应的值。有点像表单的只读视图。数据是完全动态的，因此键值对的数量可能会增加。

任何帮助或指导都值得赞赏。 我尝试使用 for in 循环进行迭代，但不知何故 React 不喜欢它，并且也了解了一些相关知识。当我发布这篇文章时，我也在解决其他问题。预先感谢。

编辑 - 如果有帮助的话我可以访问 lodash 编辑 2 - 将 stackblitz 链接更改为编辑版本

Answer 1

这是您想要实现的目标的粗略解决方案：React JSON Form

Answer 2

#新答案

这应该对你有帮助。 请注意，我也在学习 React。 https://stackblitz.com/edit/react-ytp2wh

#之前的回答

您可以使用 fetch() 方法获取数据。

MDN 文档：

基本的获取请求设置起来非常简单。看看下面的代码：

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

这里我们通过网络获取 JSON 文件并将其打印到控制台。

然后，不要使用 for 循环，而是尝试使用 map() 在 JSX 中显示数据。

样品：

 render() {
    return (  
      <div>
        { 
          movies.map((movie) => (          
            <div 
                key={movie.id} 
                title={movie.title} 
                description={movie.description}
                preview={movie.preview}
            />                      
          ))                    
        }  
      </div>
    )
  }

另请参阅 React JSX 中的循环

Answer 3

使用 react-declarative

可以轻松实现相同的结果

链接到游乐场

import { IField, FieldType } from "react-declarative";

export const data = {
   "DetailsTitle": {
      "firstPerson": {
         "foreNames": "Name",
         "otherNames": "Other name",
         "dateOfBirth": "2/5/95",
         "mainPhNumber": "123",
         "additionalPhNumber": "345",
         "email": "[email protected]",
         // Note that I filled up the empty array with placeholders
         "repeatable-previousNames": [{
         "postcode": "-",
         "fromPrevAdd": "-",
         "toPrevAdd": "-",
         "previousAddress": "-"
         }]
      }
   },
   "AddressTitle": {
      "firstPerson": {
         "permanentAddress": "no",
         "repeatable-previousAddresses": [{
         "postcode": "334455",
         "fromPrevAdd": "1/2013",
         "toPrevAdd": "7/2019",
         "previousAddress": "Test"
         }, {
         "postcode": "223344",
         "previousAddress": "sdf",
         "fromPrevAdd": "4/2016",
         "toPrevAdd": "11/2023"
         }]
      }
   }
}

export const fields: IField[] = [
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.foreNames',
   },
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.otherNames',
   },
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.dateOfBirth',
   },
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.mainPhNumber',
   },
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.additionalPhNumber',
   },
   {
     type: FieldType.Text,
     name: 'DetailsTitle.firstPerson.postcode',
   },
];