為什么我在 React 中的 object 顯示未定義的 Object 值？

Question

這是我的反應組件：

const ChartItem = ({ id, apiUrl }) => {
    const [nivoChartData, setNivoChartData] = useState([]);

    //

    //declare the API call
    const apiCallAndConversionForNivoFormat = useCallback(async () => {
        try {
            const response = await axios.get(apiUrl);
            console.log("response: ");
            console.log(response);

            //converting api response into the format needed by nivo charts
            const dataConvertedForNivo = [
                {
                    id: response.data.symbol,
                    color: "hsl(90, 70%, 50%)",
                    data: response.data.historical.forEach((key) => {
                        key["x"] = key["date"];
                        key["y"] = key["close"];
                        delete key["date"];
                        delete key["close"];
                    }),
                },
            ];
            console.log("dataConvertedForNivo: ");
            console.log(dataConvertedForNivo);

            setNivoChartData(dataConvertedForNivo);
        } catch (e) {
            console.error(e);
        }
    }, [setNivoChartData, apiUrl]);

    useEffect(() => {
        apiCallAndConversionForNivoFormat();
    }, [apiCallAndConversionForNivoFormat]);

    return (
        <div className="chart-item">
            <NivoLineChart key={id} nivoData={nivoChartData} />
        </div>
    );
};

日志：

修改前的原API響應格式：

{
    "symbol": "AAPL",
    "historical": [
        {
            "date": "2021-02-24",
            "close": 125.349998
        },
        {
            "date": "2021-02-23",
            "close": 125.860001
        },
        {
            "date": "2021-02-22",
            "close": 126
        },
    ]
}

^ 我相信由於記憶，響應日志現在顯示“x”和“y”而不是“日期”和“關閉”。

我需要轉換為的 nivo 圖表示例格式：

[
  {
    "id": "AAPL",
    "color": "hsl(90, 70%, 50%)",
    "data": [
      {
        "x": "2021-02-24",
        "y": 125.349998
      },
      {
        "x": "2021-02-23",
        "y": 125.860001
      },
      {
        "x": "2021-02-22",
        "y": 126
      },
    ]
  }
]

誰能理解為什么 dataConvertedForNivo.data 未定義？ 有沒有更好的方法來進行這種響應轉換？

Answer 1

您需要將forEach替換為map 。

const dataConvertedForNivo = [
    {
        id: response.data.symbol,
        color: "hsl(90, 70%, 50%)",
        data: response.data.historical.map(key => {
            key["x"] = key["date"];
            key["y"] = key["close"];
            delete key["date"];
            delete key["close"];
            return key;
        }),
    },
];