如何解决为什么我在 React 中的对象显示未定义的对象值?
这是我的 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
},]
}
^ 我相信 响应 日志现在显示的是“x”和“y”,而不是“日期”和“关闭”,这是由于记忆。
我需要转换为的 nivo 图表示例格式:
[
{
"id": "AAPL","color": "hsl(90,"data": [
{
"x": "2021-02-24","y": 125.349998
},{
"x": "2021-02-23","y": 125.860001
},{
"x": "2021-02-22","y": 126
},]
}
]
谁能理解为什么 dataConvertedForNivo.data 未定义?有没有更好的方法来进行这种响应转换?
解决方法
您需要将 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;
}),},];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。