Javascript 如何在Reactjs中使用Array.map格式化和显示JSON数据？

我试图显示存储为

userList

状态变量的数据。我正在尝试映射每个对象，并显示每个对象的

名称
和
电子邮件
参数，但它没有在网页上显示任何内容。我只能使用
控制台.log（）查看数据。
。我使用
displayUsers（）
显示用户，并使用
getAllUser（）
从API端点获取数据。
我认为我的
displayUsers（）
函数是错误的。
代码：

您需要向要返回的map对象的根元素添加一个键`

displayUsers(){
    return this.state.userList.map( user => {
      return(
        <div key={user.name} className="item-card">
           <div className="info">    
                <div className="username">Username: {user.name}</div>
           </div>
        <div className="del-wrap">
            <img src={require("../../images/cancel.svg")}/>
        </div>
        </div>
        );
    })
  }

displayUsers（）{
返回此.state.userList.map（用户=>{
返回(
用户名：{user.name}
);
})
}
您需要向要返回的map对象的根元素添加一个键`

displayUsers(){
    return this.state.userList.map( user => {
      return(
        <div key={user.name} className="item-card">
           <div className="info">    
                <div className="username">Username: {user.name}</div>
           </div>
        <div className="del-wrap">
            <img src={require("../../images/cancel.svg")}/>
        </div>
        </div>
        );
    })
  }

displayUsers（）{
返回此.state.userList.map（用户=>{
返回(
用户名：{user.name}
);
})
}
根据您的模型模式，您的用户对象包含
用户名
和
非名称，因此您可以在
显示用户
方法中写入
用户。用户名
，还有一个键参数有助于性能优化，您应该在迭代器返回的元素上添加一个唯一键

 displayUsers(){
        return this.state.userList.map( user => {
          return(
            <div className="item-card" key={user.id}>
               <div className="info">    
                    <div className="username">Username: {user.userName}</div>
               </div>
            <div className="del-wrap">
                <img src={require("../../images/cancel.svg")}/>
            </div>
            </div>
            );
        })
  } 

displayUsers（）{
返回此.state.userList.map（用户=>{
返回(
用户名：{user.Username}
);
})
} 
根据您的模型模式，您的用户对象包含
用户名
和
非名称，因此您可以在
显示用户
方法中写入
用户。用户名
，还有一个键参数有助于性能优化，您应该在迭代器返回的元素上添加一个唯一键

 displayUsers(){
        return this.state.userList.map( user => {
          return(
            <div className="item-card" key={user.id}>
               <div className="info">    
                    <div className="username">Username: {user.userName}</div>
               </div>
            <div className="del-wrap">
                <img src={require("../../images/cancel.svg")}/>
            </div>
            </div>
            );
        })
  } 

displayUsers（）{
返回此.state.userList.map（用户=>{
返回(
用户名：{user.Username}
);
})
} 
在我编辑您的标题之前，这将是在文档中显示格式化JSON数据的便捷快捷方式

displayUsers = () => <pre>{JSON.stringify(this.state.userList, null, '  ')}</pre>

您可以阅读更多关于JSON.stringify（value[，replacer[，space]]）
在我编辑您的标题之前，这将是在文档中显示格式化JSON数据的便捷快捷方式

displayUsers = () => <pre>{JSON.stringify(this.state.userList, null, '  ')}</pre>

您可以阅读有关JSON.stringify（value[，replacer[，space]]的更多信息
我认为这里没有必要。我已经编辑了我的问题，请查看JSON响应模型模式我想使用mapI显示JSON对象中的电子邮件和名称参数。我认为这里没有必要。我已经编辑了我的问题，请查看JSON响应模型模式我想显示JSON对象中的电子邮件和名称参数使用Map的对象上述解决方案是否不适用于您，我看到您已将not对象添加到结果数组中，但是它应该可以工作。我想显示每个JSON对象的
用户名
和
电子邮件
，而不是
用户。用户名
应该是
用户。结果。用户名
据我所知，应该是
用户。用户名
，既然您将
response.data.results
分配给
userList
Ok，您的答案就行了，但我没有从API端点获得JSON响应。我如何检查它是否是有效的API端点？使用Postman chrome扩展并检查您是否得到正确的响应上述解决方案对您无效，我看到您没有将对象添加到结果数组中，但它应该可以工作。我想显示每个JSON对象的
userName
和
email
，而不是
user.userName
应该是
user.results.userName
，据我所知，应该是
user.userName
，既然您将
response.data.results
分配给
userList
Ok，您的答案就行了，但是我没有从API端点获得JSON响应。我如何检查它是否是有效的API端点？使用Postman chrome扩展，检查您是否得到正确的响应