无法读取未定义的React JS的属性“y”

Question

当我尝试在React的useEffect钩子中赋值变量时，我遇到了这个奇怪的错误。

未处理得拒绝（TypeError）：无法读取未定义得属性“y”

下面是这个文件的代码，这是一个非常基本的文件：

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Container from '@material-ui/core/Container';
import '../../node_modules/react-vis/dist/style.css';
import {XYPlot, LineSeries, VerticalGridLines, 
    HorizontalGridLines, XAxis, YAxis,
    makeWidthFlexible, MarkSeries} from 'react-vis';

const useStyles = makeStyles((theme) => ({
    root: {
      maxWidth: '100%',
      border: '2px solid black',
      'border-radius': '10px'
    },
    graphDimensions: {
        width:'100%'
    }
}));

function StockChartCard(props){
    const classes = useStyles();

    const [strokeColor, setstrokeColor] = useState('red');
    const [data, setdata] = useState([
        {x: 0, y: 8},
        {x: 1, y: 5},
        {x: 2, y: 4},
        {x: 3, y: 9},
        {x: 4, y: 1},
        {x: 5, y: 7},
        {x: 6, y: 6},
        {x: 7, y: 3},
        {x: 8, y: 2},
        {x: 9, y: 0},
        {x: 10, y: 1},
        {x: 11, y: 5},
        {x: 12, y: 4},
        {x: 13, y: 9},
        {x: 14, y: 1},
        {x: 15, y: 7},
        {x: 16, y: 6},
        {x: 17, y: 3},
        {x: 18, y: 2},
        {x: 19, y: 0},
        {x: 20, y: 1}
    ]);
    const [openBenchmarkData, setopenBenchmarkData] = useState([]);

    useEffect(() => {
        const getStockData = async () => {
    
            console.log(data[0].y);
        
            const openPrice = data[0].y;
            const currentPrice = data[-1].y;

            if(currentPrice < openPrice){
                setstrokeColor('red')
            }
            else{
                setstrokeColor('green')
            }
        
            let benchmarkSetData = [];
            data.forEach(element => {
                const xVal = element.x;
                const dataPoint = {x: xVal, y: openPrice};
                benchmarkSetData.push(dataPoint);
            });
            setopenBenchmarkData(...openBenchmarkData, benchmarkSetData);
        }
        getStockData();
    }, [])

    return (
        <Container className={classes.root}>
            {props.quoteTicker}
                {data.length > 0 && openBenchmarkData.length > 0
                ?   (
                    <XYPlot width={650} height={300}>
                        <LineSeries animation={'noWobble'} data={data} color={strokeColor} />
                        <LineSeries data={openBenchmarkData} strokeDasharray={[1,2]}/>
                    </XYPlot>
                )
                : null
                }
        </Container>
      );
}

export default StockChartCard;

它说data[0]和data[-1]是未定义的，但该print语句显示数组不是null并且具有我设置的值。这不是一个状态问题，因为如果我将数据设置为文件中的常量，它仍然不起作用...任何帮助都是感激的，因为这个愚蠢的错误而精神崩溃。

Answer 1

我很确定-1不会给出数组的最后一个值，您可以做的是：

const currentPrice=data[data.length-1].y；

还可以抛出？可选链接，以防止其不可用时未定义。

const currentPrice=data[data.length-1]？.y；