时间戳

首页 > 解决方案 > 如何将动态 API 响应绑定到 React UI？

reactjs - 如何将动态 API 响应绑定到 React UI？

问题描述

我正在使用一个 API，它有一些“必需”字段和不需要的字段。因此，根据响应的结果，形状可能会随着响应中排除的字段发生显着变化。

示例架构：

{
  name: string; // required
  surname: string; // required
  addresses: []
  telephoneNumbers: []
  gender: string; // required
  age: number;
}

所以一个请求可以返回多种格式：

示例：'api.com/users/123'

{
  name: 'John',
  surname: 'Doe',
  addresses: [ ....]
  telephoneNumbers: [....]
  gender: 'male',
  age: 20
}

示例：'api.com/users/456

{
  name: 'Betty',
  surname: 'Boo',
  gender: 'female',
}

当我将响应绑定到我的 UI（反应）时，有没有办法检查每个字段是否存在？在呈现响应之前，我是否必须检查每个字段是否存在并在响应中具有值？如：

const DisplayResults = () => {
  const { data } = await api.getUser('123');

  return (
    <div>
      <div>{data.name}</div>
      <div>{data.surname}</div>
      {data.age && <div>{data.age}</div>}
      {data.gender && <div>{data.age}</div>}
      {data.addresses && <div>{data.addresses.map((address) => ...)}</div>}
    </div>
  )
}

请记住，任何嵌套对象都可能具有“必填”和非必填字段，这意味着我需要清理响应以匹配我想要的响应，或者检查每个字段以确保它不是未定义的。

如果我绑定到网格组件，它会为可能存在或不存在的未定义字段抛出错误。

有任何想法吗？

标签： reactjsrest

解决方案

似乎取决于数据类型，您需要不同的方式来显示数据。您可以创建一个状态，它是一个包含有关如何处理每个键的信息的对象数组。

import React from 'react'
import ReactDOM from 'react-dom'

class User extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user_rows: [
        {
            key_name: "name",
          data_function: (data = "") =>  data,
          display:(data) =>  data.length > 0 ? true : false
        },
        {
            key_name: "addresses",
          data_function:(data = []) => data.map((a,idx) => {
            return( <div>{a}</div>)
          }),
          display:(data) => data.length > 0 ? true : false
        },
        {
            key_name: "gender",
          data_function:(data = "") => data,
          display:(data) => data.length > 0 ? true : false
        }
      ]
    }
  }

  render() {
    let data = {
      name: 'John',
      surname: 'Doe',
      addresses: ["adress 1"],
      telephoneNumbers: ["000 000 000"],
      gender: '',
      age: 20
    }
    return (
      <div>
        {this.state.user_rows.map((ur,idx) => (
            ur.display && <div key={idx}>{ur.data_function(data[ur.key_name])}</div>
        ))}

      </div>
    );
  }
}

ReactDOM.render(
  <User/>,
  document.getElementById('container')
);

推荐阅读