时间戳

首页 > 解决方案 > 如何映射对象

reactjs - 如何映射对象

问题描述

我有个问题。我想将响应对象映射到数组。基本上，如果响应也是一个数组，则使用映射，但在这种情况下，来自服务器的响应是一个对象。我该如何映射？

获取用户.js

this.state = {
          post : '',
          post2 : [],
          formData : {
            username : '',
            clientId : ''
          }

getPostAPI = (event) => {
        event.preventDefault();
        const token = localStorage.getItem('token');
        const { post } = this.state
        const { username } = this.state.formData

        axios.post(`http://10.40.22.21:8062/users/get`, { username } ,
          {
            headers:
              {
                "Content-Type" : "application/json",
                "User-Agent" : "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36",
                "AUTHENTICATION-KEY" : token, 
              }
          })
        .then((res)=>{
            let response = res;
            if(response){  

                this.setState ({
                  post : response.data.response
                })  

                console.log(response.data.response)

              }

        },this)
        .catch( (error) => {        
              alert('Username Tidak di Temukan',error)
            }
        )
  }

GETuser.js 中的 myForm

{
                  Object.values(post).map((h,i) => (

                  <tr key = {i} >
                  <th scope="row">
                    <Media className="align-items-center">
                      <Media>
                        <span className="badge-dot mr-4">
                          {h.username}
                        </span>
                      </Media>
                    </Media>
                  </th>
                  <th scope="row">
                    <Media className="align-items-center">
                      <Media>
                        <span className="badge-dot mr-4">
                          {h.firstName}
                        </span>
                      </Media>
                    </Media>
                  </th>
                  <th scope="row">
                    <Media className="align-items-center">
                      <Media>
                        <span className="badge-dot mr-4">
                          {h.password}
                        </span>
                      </Media>
                    </Media>
                  </th>
                  <th scope="row">
                    <Media className="align-items-center">

                      <Media>
                        <button  className="btn btn-danger" onClick= {() => this.handleRemove(post.clientId)}><i class="fa fa-trash"></i></button>                        

                      </Media>
                    </Media>
                  </th>


                </tr>
                ))

来自服务器的响应

{
  "responseCode":"00",
   "message":"Process successful. ",
   "localMessage":"Proses Berhasil.",
    "response" : {"username":"admin","firstName":"admin","middleName":"is","lastName":"admin","password":"fZE+K9bKT29FAEOaJbfFw==","effectiveDate":"25-01-2019 07:00:00","expiredDate":"25-01-2021 07:00:00","phone":"082234051157","email":"asdsad@gmail.com"}}

我希望不能 post.map，所以我可以使用操作删除或更新谢谢

标签： reactjs

解决方案

如果要将对象转换为数组，则有以下选项：

1)Object.values(post.response)将对象的值作为数组提供给您。

2）Object.keys(post.response)会给你对象的键作为一个数组。

3)Object.entries(post.response)将为您提供一个数组，其中每个元素都是一个由键和值组成的数组。

因此，您可以这样做：

Object.keys(response).map( heading =>
<tr>
 <th scope="row">
  <Media className="align-items-center">
   <Media>
    <span className="badge-dot mr-4">
     {heading}
    </span>
   </Media>
  </Media>
 </th>
<td scope="row">
  <Media className="align-items-center">
   <Media>
    <span className="badge-dot mr-4">
     {response[heading]}
    </span>
   </Media>
  </Media>
 </td>

这样，您可以根据对象属性动态定义列并输出相应的值。

推荐阅读