时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“nam”

reactjs - TypeError：无法读取未定义的属性“nam”

问题描述

我正在寻找有关 React 问题的答案。单击复选框时出现此错误：

TypeError: Cannot read property 'nam' of undefined
Checkbox._this.change
:42
  39 |    let na=[event.target.name]
  40 |     for(let i=0; i<=this.state.data.length;i++){
  41 | 
> 42 |         if(na==this.state.data[i].nam){
     | ^  43 |     
  44 | this.setState({
  45 |     [this.state.data[i].che]:!this.state.data[i].che

我有三个组件：

这是“检查”组件的代码：

import React from 'react'

class Check extends React.Component {

    constructor(props) {
        super(props)
    }



    render() {



        return (

            <div>
                {this.props.name}<input type="checkbox" checked={this.props.checked}
                    onChange={this.props.onChange} name={this.props.name} /><br />

            </div>
        )


    }
}

export default Check;

这是 Checkbox 组件的代码：

import React from 'react';
import Check from './Check.js';

class Checkbox extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [{


                nam: "jill",
                che: false

            },
            {
                nam: "jon",
                che: false
            }
            ]



        }

        console.log(this.state.data)
        this.change = this.change.bind(this);



        let d = this.state.data


    }


    change = (event) => {
        let na = [event.target.name]
        for (let i = 0; i <= this.state.data.length; i++) {

            if (na == this.state.data[i].nam) {

                this.setState({
                    [this.state.data[i].che]: !this.state.data[i].che
                })
            }
            console.log(na)
            console.log(event.target.checked)
        }
    }



    render() {

        let d = [{}];
        d = this.state.data;

        console.log(this.state.data)
        // console.log(this.listar(d))

        return (

            <div className="prova">


                {this.state.data.map(v => {
                    return (
                        <Check name={v.nam} checked={v.che} onChange={this.change} />

                    )
                })}



            </div>
        )


    }


}

标签： reactjs

解决方案

请在检查长度时尝试仅使用“小于”运算符，如下所示

for(let i=0; i < this.state.data.length;i++)

问题应该与 for 循环中的条件有关。

for(let i=0; i<=this.state.data.length;i++)

在这里，循环代码即使在 时也会被执行i = 2，在你的情况下这是数组的长度，但是由于数组索引是0基于的，所以

this.state.data[2] = undefined

因此，当我们尝试访问其中的“nam”属性时，我们会收到上述错误，因为我们基本上是在尝试nam在undefined.

我希望这有帮助。

推荐阅读