地图函数中的对象解构

Question

下面是我正在处理的组件：

//PURPOSE : Component to show some useful information about the current page. like LAST REFRESH TIME OF DATA.
//Props that needs to be passed. - {MessageTitle}
//
import React, { useEffect, useState } from "react";
import "../../css/BubbleInfoComponent.scss";
import ApiHelper from "../../api/ApiHelper";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const BubbleInfoComponent = (props) => {
  let [Info, setInfo] = useState({});
  function onClicko() {
    console.log("Handling Click");
  }

  useEffect(() => {
    getData();
    // eslint-disable-next-line
  }, [Info]);
  function getData() {
    ApiHelper.GetLastRefreshTime(props.uid).then((response) => {
      // const infoData = response.data.map(({sysName, lastRefreshTime}) =>{
        // return (sysName ? <div key={sysName}>`{sysName}:{lastRefreshTime}`</div>): <div>{lastRefreshTime}</div>;
      // })
      // setInfo(infoData);
      // console.log("infoData:- ")
      // console.log(infoData);
    });
  }
  return (
    <>
      <div id="Bubble__Circle" onClick={onClicko}>
        <p>
          <FontAwesomeIcon icon="info" color="#30343f" />
        </p>
      </div>
      <div id="Bubble__Content">
        <div id="Bubble__Content_Msg_Title">{props.MessageTitle}</div>
        {/* <div id="Bubble__Content_Msg_Title">{Info}</div> */}
      </div>
    </>
  );
};

export default BubbleInfoComponent;

我会得到两种 JSON 响应：

1. { “系统A”：“07-04-2021 08:00”， "系统 B": "07-04-2021 08:00", “系统C”：“07-04-2021 08:00” }
2. {“回复”：“07-04-2021 08:00”}

我想要实现的是第一种类型的响应，我想以"Key": "Value" 格式设置Info 的值，并且对于第二种类型的响应，只有时间应该是可见的。

我希望我的观点很清楚。我知道我在 line21 中解构时做错了，这可能看起来很傻，但作为 JavaScript 的新手，我无法确定我哪里出错了。

Answer 1

Map 函数可以在数组而不是对象上运行。所以首先要做的就是将对象转换为数组。为此，您可以使用 Object.entries，它将为您提供对象中每个元素的键和值。

参考 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

根据响应类型，您可以直接访问时间或通过地图运行。这是开始的代码：

ApiHelper.GetLastRefreshTime(props.uid).then((response) => {
    const mapSystemNames = (data) => Object.entries(data).map(([key,value]) => <div key={key}>{key}:{value}</div>)
    const infoData = response.data.responses? <div>{response.data.responses}</div> : <div>{mapSystemNames(response.data)}</div>;
  // setInfo(infoData);
  // console.log("infoData:- ")
  // console.log(infoData);
});

可能需要一些极端情况场景/类型检查以使其更加健壮，但这可以让您朝着正确的方向开始。如果您有任何疑问，请告诉我。