开发者问题收集

React - TypeError:无法读取未定义的属性“dropdownList”

2020-11-27
610

我尝试从对象输出数据,但出现错误“TypeError: 无法读取未定义的属性‘dropdownList’”,在 Lesson 数组之前所有对象都成功到达,但随后出现未定义,这可能是什么问题?其他所有 jsx 都已删除以提高可读性 https://ibb.co/hRytjMB https://ibb.co/6F1YcBr

Lesson.jsx

{
    this.props.lesson.dropdown.dropdownList.map(option =>
        items.push(<option>{option.par}</option>)
    )
}

lesson-reducer.js

import React from 'react';
import {faDotCircle} from "@fortawesome/free-solid-svg-icons/faDotCircle";

const ADD_LESSON = "ADD_LESSON";
const one = "Robby";

let initialState = {
    lessonsTitle: [
        {
            iconName: faDotCircle,
            description: [
                <span className="yourClass">{one}</span>,
                ` advanced diverted domestic sex repeated bringing you old.`
            ],
            dropdown: {
                titleName: "JSON",
                dropdownList: {
                    par: 'Hello World',
                }
            }

        },
        {
            titleName: "Boolean",
            iconName: faDotCircle,
            description: `
                Folly words widow one downs few age every seven. tolerably.
            `,
            languages: [
                'Язык HTML2',
            ]
        },
        {
            titleName: "Math",
            iconName: faDotCircle,
            description: `
               Another journey chamber way yet females man.
            `,
            languages: [
                'Язык HTML3',
            ]
        },
    ],

};
2个回答

看来您的 Reducer 中存在不连贯的结构,从而导致未定义的错误。对于第一个对象,它应该可以工作,因为您确实有一个下拉对象,但其他两个对象没有,这可能会导致问题。

此外,您的 dropdownList 是一个对象,但如果您想对其进行迭代,它似乎应该是一个数组。

您可以尝试此验证以保持其清洁:

this.props.dropdown?.dropdownList?.map(...)

那里的询问点检查前面的值是否为 null 或未定义,如果不是,则提供对其属性的访问。否则,它会跳过前面的内容并转到下一个代码语句。

此外,您还应该迭代课程,因为它是一个数组

Vítor Brito
2020-11-27

您收到 TypeError: Cannot read property 'dropdownList' of undefined 的原因 是因为您尝试在没有索引的情况下访问 this.props.lesson ,并且它是一个数组/

由于 this.props.lesson 是一个数组,我认为您想使用 map() 而不是 this.props.lesson 来实现您的目标

Ron Gabbay
2020-11-27