在反应中，如何从对象中读取属性和数据答案

【问题标题】：In react, how to read properties and data from object在反应中，如何从对象中读取属性和数据
【发布时间】：2021-01-01 16:37:34
【问题描述】：

我有反应中的表格组件，除了通用的“自定义参数”。目标是；我将对象与数据一起传递，并将其转换为 URL 参数以传回 API。例如“&startTime=2020-12-12&endTime=2020-12-30”

由于此表可用于任何组件或对象，因此我需要动态读取属性和值。

现在

我有接口

 export interface ISearchCriteriaForm{
    startTime: Date,
    endTime: Date,
    LiveTime: Date,
    schedAction_Active: string,
    siteId: number,
    scheduleId: number
  }

在组件中，我创建了 ISearchCriteriaForm 的实例并为其分配了一个测试数据。

const MyComponent = () => {

  const[searchCriteria, setstatusSearchCriteria] = useState<ISearchCriteriaForm> ();


   const searchCriteria : ISearchCriteriaForm= {
     startTime: new Date("08/12/2020"),
     endTime: new Date("09/12/2020"),
     LiveTime: new Date("10/12/2020"),
     schedAction_Active: "Active",
     siteId: 1825,
     scheduleId: 3792
  };

  setEziStatusSearchCriteria(searchCriteria);

在这里我需要帮助。我需要阅读“searchCriteria”对象属性名称，包括值，以便我可以制作如下的最终字符串。例如解决方案将“startTime”读取为属性和值“08/12/2020”等等

    "&startTime=08/12/2020&endTime=09/12/2020&LiveTime=10/12/2020&schedAction_Active=Active"

【问题讨论】：

你试过这个new URLSearchParams(searchCriteria).toString()吗？
你试过什么？ searchCriteria.startTime 之类的东西是否不适用于读取对象属性？

标签： reactjs

【解决方案1】：

您可以像这样将您的对象传递给URLSearchParams 的新实例：

const searchCriteria = {
  startTime: new Date("08/12/2020"),
  endTime: new Date("09/12/2020"),
  LiveTime: new Date("10/12/2020"),
  schedAction_Active: "Active",
  siteId: 1825,
  scheduleId: 3792
};

const res = new URLSearchParams(searchCriteria).toString();
console.log(res);

不适用于 IE。

【讨论】：