Question

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

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

感谢任何帮助或指导。我尝试进行循环迭代，但是以某种方式React不喜欢它，并且对此有所了解。发布此文章时，我还会遇到其他SO问题。预先感谢。

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

Answer 1

＃新答案

这应该对您有帮助。请注意，我也在学习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文件，并将其打印到控制台。

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

示例：

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

另请参阅Loop inside react JSX

Answer 2

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

React-渲染复杂的json数据

2 个答案: