反应解构变量未定义答案

【问题标题】：react destructuring variable got undefined反应解构变量未定义
【发布时间】：2021-01-08 08:58:32
【问题描述】：

我是新来的反应。我的问题是我的变量一直说它是未定义的。我想要做的是显示这些变量但未能对其进行解构。执行过滤器功能并返回单个游览。数据检索成功。通过解构这个，一些包含数组的变量无法显示。有谁知道如何解决这个问题？

TypeError: Cannot read property '0' of undefined

我的数据如下所示。

[
  { 
    "_id": "12345",
    "name": "I am first tour",
    "startLocation": {
       description: "USA",
       type: "point"
    },
    "startDates": [
      "2021-06-19T09:00:00.000Z",
      "2021-07-20T09:00:00.000Z",
    ],
    "imageUrl": [
      "https://something1.jpg",
      "https://something2.jpg",
      "https://something3.jpg",
    ],
  },
  //.....rest data
]

import React, { Component } from 'react';
import './Tour.css';
import { connect } from 'react-redux';

class Tour extends Component {
constructor(props) {
    super(props)
        this.findSingletour = this.findSingletour.bind(this);
    }

    findSingletour = (tourId) => {
        const notYetFilterTours = this.props.tours.tourState.data;
        let filtered = [];

        if (notYetFilterTours) {
            filtered = notYetFilterTours.find((tour) => {
                if (tour.id === tourId) {
                    return filtered;
                }
                return filtered;
            });
        }
        return filtered;
    };
        
    render() {
    const tourId = this.props.match.params._id;
    let SingleTour = this.findSingletour(tourId);
     
        const {
            name,
            startLocation,
            startDates,
            imageUrl
            } = SingleTour;

        return (
            <div>
                <span>{name}</span> // successfully rendered
                <span>{startLocation[0]}</span> // undefined
                <span>{startDates[0]}</span> // undefined
                <span>{imageUrl[0]}</span> // undefined
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    tours: state.tourContainer,
});

export default connect(
    mapStateToProps,
)(Tour);

【问题讨论】：

你能分享一些代码背后的内容吗？
控制台并检查“SingleTour”一定有问题。

标签： reactjs

【解决方案1】：

需要做验证以防万一：

class Tour extends Component {
    // some code
    render() {
     
        const {
            name,
            startLocation,
            startDates,
            imageUrl
            } = SingleTour;

        return (
            <div>
                <span>{name}</span> // successfully rendered
                <span>{startLocation && startLocation.length > 0 ? startLocation[0] : ''}</span> // undefined
                <span>{startDates && startDates.length > 0 ? startDates[0] : ''}</span> // undefined
                <span>{imageUrl && imageUrl.length > 0 ? imageUrl[0] : ''}</span> // undefined
            </div>
        )
    }
}

【讨论】：

你的答案在这种情况下是最合适的，但我犯了一个错误。 startLocation 变量是一个对象。我如何用你的答案检查对象？ startLocation['description'] 未定义
if (startLocation && startLocation['description']) { }

【解决方案2】：

您可以提供默认值，通常最好有合理的默认值，以防数据未加载并呈现 UI。

所以这样的事情可以防止此类错误：

const {
    name = '',
    startLocation = [],
    startDates = [],
    imageUrl = ''
} = SingleTour;

现在，如果您的 UI 呈现并尝试获取 0 或 startLocation，它不会失败。它当然什么也找不到，除了 UI 骨架什么都不显示，但应用程序不会出错。

【讨论】：