时间戳

首页 > 解决方案 > （已解决）React/JS 如何获取 props.data 的最后一个索引的值，它是一个对象

javascript - （已解决）React/JS 如何获取 props.data 的最后一个索引的值，它是一个对象

问题描述

我有一个将数组对象传递给子组件的应用程序，子组件可以通过“props.data”访问数据，其格式如下：...父组件（无状态）

const array = [];
for(let i=0; i<totalRows; i++){
    array.push({
        key: i,
        date: new Date(dataObj[i]["properties"]["Date"]).toLocaleString().split(',')[0],
        name: dataObj[i]["properties"]["Name"],
        total_cases: dataObj[i]["properties"]["Total_Cases"],
        cases_today: dataObj[i]["properties"]["Cases_Today"],
        tested_today: dataObj[i]["properties"]["TestedToday"],
        total_deaths: dataObj[i]["properties"]["Deaths"],
        deaths_today: dataObj[i]["properties"]["Deaths_Today"],
    });
}

return(
    <div>
    <div>
        // for each name in array, display line charts
        {array && 
            array.map( name => {
                return <DisplayLineChart 
                            key = {name}
                            data = {array.filter(obj => obj.name === name)}

...子组件（无状态）

function DisplayLineCharts(props){
      ...
console.log(props.data[props.data.length-1].total_cases); // error

... 执行“console.log(props.data)”返回

246: {key: 3510, date: "10/27/2020", name: "Canada", total_cases: 222887, cases_today: 2674, …}
247: {key: 3522, date: "10/28/2020", name: "Canada", total_cases: 225586, cases_today: 2699, …}
248: {key: 3540, date: "10/29/2020", name: "Canada", total_cases: 228542, cases_today: 2956, …}
249: {key: 3566, date: "10/30/2020", name: "Canada", total_cases: 231999, cases_today: 3457, …}
length: 250
__proto__: Array(0)

我只想获取“total_cases”（键）的最后一个值，当我尝试“props.data[props.data.length-1].total_cases”时它显示一个未定义的错误知道什么会导致这个错误吗？

我可以在“console.log(props.data[props.data.length-1])”时获取最后一个对象记录，如下所示：

{key: 3563, date: "10/30/2020", name: "British Columbia", total_cases: 14381, cases_today: 272, …}
cases_today: 272
date: "10/30/2020"
deaths_today: 1
key: 3563
name: "British Columbia"
tested_today: 5488
total_cases: 14381
total_deaths: 263
__proto__: Object

感谢您的时间！

通过以下方式解决了这个问题：

    var lastDate = "";
// Date: Name, Total_Cases, Cases_Today, TestedToday, Deaths_Today, Percent_Today, Percent_death, Percent_Recovered
for(var i=0; i<totalRows; i++){
    ...

    if (i===totalRows-1){
        lastDate = new Date(dataObj[i]["properties"]["Date"]).toLocaleString().split(',')[0]
    }
}

   return <DisplayLineChart 
                key = {name}
                data = {array.filter(array => array.name === name)}
                name = {name}
                totalCase = {array.filter(array => array.name === name && array.date === lastDate)
                    .map( array => {return array.total_cases;})} 
            />;

标签： javascriptarraysreactjsobject

解决方案

您正在尝试获取对象的 .length ，这不是一回事。

你可以得到一个数组的 .length

使用循环也不是一个好方法。

const data = Array.from({ length: totalRows }).map((_, i) => ({
        key: i,
        date: new Date(dataObj[i]["properties"]["Date"]).toLocaleString().split(',')[0],
        name: dataObj[i]["properties"]["Name"],
        total_cases: dataObj[i]["properties"]["Total_Cases"],
        cases_today: dataObj[i]["properties"]["Cases_Today"],
        tested_today: dataObj[i]["properties"]["TestedToday"],
        total_deaths: dataObj[i]["properties"]["Deaths"],
        deaths_today: dataObj[i]["properties"]["Deaths_Today"],
}))


console.log('data: ', data)

console.log('lastData: ', data[data.length - 1])

推荐阅读