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

Posted 2023-02-27

【中文标题】React 无法读取未定义的属性映射

【英文标题】：React cannot read property map of undefined

【发布时间】：2018-01-07 05:50:40

【问题描述】：

我对反应非常陌生，我正在尝试从 rails api 引入数据，但我收到错误 TypeError: Cannot read property 'map' of undefined

如果我使用 react 开发工具，我可以看到状态，如果我在控制台中使用 $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 contactcontact />)
      </ul>
    )
  


export default ContactsList;

【问题讨论】：

您确认response.contacts 是一个数组吗？

【参考方案1】：

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

因为this.state 最初是，而 中的contacts 将是未定义。重要的一点是，componentDidMount 将在初始渲染后被调用，并在首次渲染期间抛出该错误。

可能的解决方案：

1-将contacts的初始值定义为[]状态：

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

2- 或者在使用map之前打勾：

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

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

注意：您需要为地图内的每个元素分配唯一键，检查DOC。

【讨论】：

噢！谢谢现在就像一个魅力，我会在 12 分钟后将其标记为答案。