Question

TypeError：无法从未定义读取属性“0”

2020-03-12

150

javascript reactjs

我是 ReactJS 的初学者，下面是我正在尝试运行的示例程序：

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';

class App extends Component {

state = {

persons : [
{ name: 'John' , age:20 },
{ name: 'Jack' , age:29 }

]

}

  render() {
    return (
      <div className="App">
        <h1>Yo mama</h1>
        <p>hmm</p>
        <button>Switch </button>
        <Person name={this.state.persons.name[0]} age ={this.state.persons.age[0]}/> 
        <Person name={this.state.persons.name[1]} age ={this.state.persons.age[1]}/>
      </div>

    );


  }
}

export default App;

Person.js

import React from 'react';

const Person = (props) => {
return(
<div>
<p>Hey Saurabh, Whats up</p>
<p>{props.name}</p>

</div>
);

};

export default Person;

运行时，我在浏览器中收到以下错误

TypeError: Cannot read property '0' of undefined

在第 3 行：

<Person name={this.state.persons.name[0]} age ={this.state.persons.age[0]}/>

有人可以帮忙吗

Answer 1

在本例中，Persons 是数组，因此不是：

this.state.persons.name[0]

而应该是：

this.state.persons[0].name

Answer 2

正如其他答案所指出的那样，您尝试访问 name 和 age 上的属性 0 。但您想要访问数组中的每个项目。

如果 name 和 age 是对象，则此方法有效

name: {
   "0": 'Bad Name'
}

age: {
   "0": 'Bad Age'
}

但在这种情况下，它是一个原始值（字符串和数字）这也可以写在这些行中。

<button>Switch </button>
{
  this.state.persons.map(person => {
      // each iteration is the item in the array
      // which is the person in this case
      const {
        age,
        name
      } = person;

      return (
        <Person name={name} age ={age} key={name}/> 
      )
  });
}

Answer 3

您没有正确引用数组项：

this.state.persons.age[0] <- 这表示 age 是一个数组，但实际上不是，因此会出现数组错误。

persons 是实际的数组。尝试以下操作：

this.state.persons[0].age