为什么我在 React 中的对象显示未定义的对象值？答案

【问题标题】：Why is my object in React showing an undefined Object value?为什么我在 React 中的对象显示未定义的对象值？
【发布时间】：2021-05-28 05:52:36
【问题描述】：

这是我的 React 组件：

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
        },
    ]
}

^ 我相信 response 日志现在显示“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 未定义？有没有更好的方法来进行这种响应转换？

【问题讨论】：

我猜你想要.map 而不是.forEach。如果你发现data 是空白的，第一步是look up forEach 并检查它返回的内容（无）
响应日志显示不是空白的吧？
是的，我知道，但是当你构建你的状态数组时，你会用response.data.historical.forEach(...) 填充你的data:，就像我说的那样，undefined。就像我说的，你需要用.map 替换.forEach -> 问题解决了。
（当我说数据为空白时，我指的是nivoChartData[0].data，而不是response.data）

标签： javascript json reactjs react-state react-state-management

【解决方案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;
        }),
    },
];

【讨论】：