React无法读取未定义的属性映射

  • Z时代
  • 2024-01-10
  • 分类：问答

我是一个非常新的反应者，我正在尝试从Rails api导入数据，但出现错误 TypeError: Cannot read property 'map'

of undefined

如果我使用react

dev工具，则可以在控制台中看到状态，也可以看到联系人，方法是使用$r.state.contacts有人可以帮忙解决我做错的事情吗？我的组件看起来像这样：

import React from 'react';
import Contact from './Contact';
class ContactsList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentDidMount() {
    return fetch('http://localhost:3000/contacts')
      .then(response => response.json())
      .then(response => {
        this.setState({
          contacts: response.contacts
        })
      })
      .catch(error => {
        console.error(error)
      })
  }
  render(){
    return(
     <ul>
        {this.state.contacts.map(contact => { return <Contact contact{contact} />})}
      </ul>
    )
  }
}
export default ContactsList;

回答：

无法读取未定义的属性“ map”，为什么？

因为this.state最初是{}，并且contactsof {}将是 。重要的一点是，

将在初始渲染后被调用，并且在第一次渲染时会抛出该错误。

1-定义状态中contactsas 的初始值[]：

constructor(props) {
  super(props)
    this.state = {
       contacts: []
    }
}

2-或在使用支票之前先将支票放上map：

{this.state.contacts && this.state.contacts.map(....)

对于检查数组，您也可以使用Array.isArray(this.state.contacts)。

您需要为地图中的每个元素分配唯一键，请检查

。

以上是 React无法读取未定义的属性映射 的全部内容， 来源链接： utcz.com/qa/400746.html

回到顶部