如何映射传递给函数的 JSON 数据？答案

【问题标题】：How do I map JSON data that is passed into a function?如何映射传递给函数的 JSON 数据？
【发布时间】：2021-09-30 13:50:48
【问题描述】：

我正在尝试获取 JSON 数据并将其传递到我的“HistoryChart”组件中，以尝试将日期和价格映射到两个数组中，以便我可以在图表上显示它们。但是，我不断收到未定义的错误。

这是 JSON 数据：

{
    "_id": 1,
    "name": "",
    "brand": "",
    "image": "",
    "sources": [],
    "history": [
        {
            "_id": 3,
            "price": "299.99",
            "product": 1,
            "date": "2021-07-01"
        },
        {
            "_id": 4,
            "price": "399.99",
            "product": 1,
            "date": "2021-07-08"
        },
        {
            "_id": 5,
            "price": "499.99",
            "product": 1,
            "date": "2021-07-15"
        },
        {
            "_id": 6,
            "price": "599.99",
            "product": 1,
            "date": "2021-07-22"
        },
        {
            "_id": 7,
            "price": "699.99",
            "product": 1,
            "date": "2021-07-29"
        }
    ]
}

这是我的 HistoryChart 组件：

function HistoryChart({product}) {
 
    var dates = product.history.map(function(e){ //<-- The Problem lies here where it says cannot map undefined.
        return e.date;
    });

    var prices = product.history.map(function(e){
        return e.price;
    });

    return (
        <div>
            <Line
                data={{
                    labels: dates,
                    datasets: [{
                        label: `Average Price History (ID: ${product._id})`, //<-- This part works
                        backgroundColor:/* 'transparent' */ '#00ad0e',
                        borderColor: '#00ad0e',
                        data: prices,
                    }]
                }}
                width={100}
                height={50}
                options={{ maintainAspectRatio: true }}
            />
        </div>
    )
}

我也在使用 redux 来获取数据：

const productDetails = useSelector(state => state.productDetails)
const {error, loading, product} = productDetails

数据像这样传递到 HistoryChart 组件中：

 <HistoryChart product={product}/>

任何帮助将不胜感激，谢谢。

【问题讨论】：

你确定你传递了正确的对象吗？也许你正在将它包装在另一个中。你能在HistoryChart() 中console.log(product) 吗？

标签： javascript arrays reactjs redux charts

【解决方案1】：

对不起，如果这不是您的主要问题，但是当 .map 导致未定义时，最简单的调整是验证您的数组是否未定义。

所以在我的项目中，我总是先检查数组是否未定义，我会用你的代码做一个例子

  function HistoryChart({product}) {
     
if (product !== undefined){
        var dates = product.history.map(function(e){ 
            return e.date;
        });

    
        var prices = product.history.map(function(e){
            return e.price;
        });
}

试试这个方法，如果可行，请告诉我。

【讨论】：

我尝试了您的方法，但它仍然显示“无法映射未定义”，但是当使用“if (product.history !== undefined)”时它起作用了，但我不确定为什么。
哦，现在再次检查，我忘了指定.history，你需要这样做，因为你的Json的这个节点中有一个数组，所以你可以获得一个Json并且有一个未定义的历史数组在 Json 内部，这就是你需要检查的原因！
我明白了，非常感谢您的帮助！

【解决方案2】：

错误原因

由于数据来自服务器，加载需要一些时间。并且您收到未定义错误，因为您第一次想要访问尚未成功加载的对象 product 的 history。

解决方案

const price = product && product.history.map(//do what you want)

这样使用对象的键值不会导致任何错误，因为如果产品没有加载它不会调用映射函数，当产品对象加载成功时它会调用映射函数

【讨论】：