React - 渲染复杂的 json 数据

Question

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

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

感谢任何帮助或指导。 我尝试 for in 循环进行迭代，但不知何故 React 不喜欢它并且也对此有所了解。在发布此内容时，我还将处理其他 SO 问题。提前致谢。

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

Answer 1

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

Answer 2

#新答案

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

#上一个答案

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

MDN docs:

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

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>
    )
  }

另见Loop inside react JSX