带有条件语句的嵌套对象迭代 ReactJs答案

【问题标题】：Nested Object Iteration with conditional statements ReactJs带有条件语句的嵌套对象迭代 ReactJs
【发布时间】：2021-10-13 15:39:55
【问题描述】：

我有来自 React Js 的以下 api 调用。它是一个类组件。我是 React Js 的新手。

class UserComponent extends React.Component {
        constructor(props){
super(props)
this.state=({
    users: []
});
    retrieve(e){
          e.preventDefault();
           fetch(`http://localhost:8080/test/{this.state.id}`,{
             "method":"GET",
             "headers":{
                "accept":"application/json"
               }
          })
        .then(response => response.json())
        .then(response => {
          this.setState({
             users:response
          })
       }

    render(){
   return (
   <div>
   <form>
<table>
  <tbody>
  {
    this.state.users === '' || null ? '' : Object.entries(this.state.users).map([key,value])=>(
        Object.entries(key).map(field=>(
      <tr>
        <td>
         <input name = "firstName" id = firstName" defaultValue = {field.firstName} required/>
        </td>
      </tr>
))))
}
  </tbody>
</table>

</form>
</div>
)
}
}
export default UserComponent

我需要从一个简单的 json 文件中获取 firstName 和 lastName 以及其他详细信息

{
   "id":"12224343",
    "depId":"1",
    "employees":[{
      "empId":"1",
      "firstName":"sample",
      "lastName":"test",
       "address":[{
             "street":"1",
             "pin":"12345"
    }]
    }]

}

我还需要获取这个嵌套对象的名字和姓氏以及地址对象的值。反应类组件中有没有类似平面图的东西。我没有使用 useEffects 之类的。

当我尝试对其进行迭代时，得到“地图不是函数。它是未定义的”

具有状态对象的类组件有任何限制。尝试了很多选择。

我需要迭代 object 的对象并仅获取 UI 测试框中的特定值。比如名字和姓氏。现在它正在迭代所有内容并在 UI 中显示所有内容。看起来很乱。

请帮我解决这个问题。

【问题讨论】：

标签： javascript java json reactjs api

【解决方案1】：

由于您将状态用户初始化为数组。您可以只使用 users.map(item)。每个项目包含多个员工。您还可以将当前 json 文件中的数据转换为任何适合您在表格中显示的数据结构。

const {users} = this.state
    users?.map((user,index) => {
      return (
          <div key={key.id}>
            {user?.employees.map(item => {
              return (
                  <div key={item.empId + key.id}>
                    <input defaultValue = {item.firstName} required/>
                  </div>
              )
            })}
          </div>
      )
    } )

我建议选择 Material UI 或 Antd 等开源 UI 库来显示表格内的数据。它节省了管理响应式网页样式的时间。

【讨论】：

非常感谢您的回复。我可以知道有什么方法可以将嵌套对象转换为单个对象，就像我们在 java 8 中使用平面图转换所做的那样。这样我就可以轻松地直接选择值
可能需要自己编写转换方法。对象在不同情况下可能不同。

【解决方案2】：

我已经初始化了一个空的返回对象，它修复了所有的问题，它就像一个魅力。请检查以下详细信息。

class UserComponent extends React.Component {
        constructor(props){
super(props)
this.state=({
    users : [{
   "id":"",
    "depId":"",
    "employees":[{
      "empId":"",
      "firstName":"",
      "lastName":"",
       "address":[{
             "street":"",
             "pin":""
    }]
    }]

}]
});
    retrieve(e){
          e.preventDefault();
           fetch(`http://localhost:8080/test/{this.state.id}`,{
             "method":"GET",
             "headers":{
                "accept":"application/json"
               }
          })
        .then(response => response.json())
        .then(response => {
          this.setState({
             users:response
          })
       }

    render(){
   return (
   <div>
   <form>
<table>
  <tbody>
  {
    this.state.users === '' || null ? '' : Object.entries(this.state.users).map([key,value])=>(
        Object.entries(key).map(field=>(
      <tr>
        <td>
         <input name = "firstName" id = firstName" defaultValue = {field.firstName} required/>
        </td>
      </tr>
))))
}
  </tbody>
</table>

</form>
</div>
)
}
}
export default UserComponent

【讨论】：