React中如何将服务器返回的对象转为数组以实现map渲染？

你的问题其实很常见——服务器返回单个对象，但你需要用数组的map方法来渲染和操作数据，只需要把这个单个对象包装成数组就能解决，我来一步步帮你调整代码：

第一步：调整State初始化（可选但更合理） #

你当前state里的post初始值是字符串''，既然最终要存数组，不如直接初始化为空数组，避免类型切换带来的潜在问题：

this.state = { 
  post: [],  // 改为空数组
  post2: [], 
  formData: { username: '', clientId: '' } 
}

第二步：修改API响应的处理逻辑 #

在getPostAPI的then回调里，把服务器返回的单个对象包装进数组，再赋值给post：

.then((res)=>{
  let response = res;
  if(response){
    // 把单个对象包装成数组
    this.setState ({ post: [response.data.response] })
    console.log(response.data.response)
  }
},this)

第三步：修正渲染时的map遍历 #

之前你用Object.values(post).map()，这会把对象的属性值拆成独立数组（比如['admin', 'admin', ...]），导致遍历的每一项h不是完整的用户对象，自然拿不到h.username这些属性。现在post已经是数组了，直接遍历它就行：

{ 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>
          {/* 这里要改成h.clientId，因为h是数组里的单个用户对象 */}
          <button className="btn btn-danger" onClick={() => this.handleRemove(h.clientId)}>
            <i className="fa fa-trash"></i>
          </button>
        </Media>
      </Media>
    </th>
  </tr>
))}

为什么这么做？ #

• map是数组的原型方法，单个对象无法直接调用，把对象放进数组（哪怕只有一个元素）就能正常使用map；
• 包装成数组后，每一项h都是完整的用户对象，你能直接访问它的所有属性（username、firstName、clientId等），不管是渲染还是后续的删除/更新操作都能正常进行；
• 这种方式也兼容后续服务器可能返回多个对象的情况，代码不需要大改。

内容的提问来源于stack exchange，提问作者Alexsandro Siregar