Question

我正在寻找有关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>
        )


    }


}

Answer 1

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

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属性。

我希望这会有所帮助。

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

1 个答案: