Question

我是新手，我正在尝试从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;

Answer 1

无法阅读财产＆＃39; map＆＃39;未定义的，为什么？

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

可能的解决方案：

1-在状态中将{}的初始值定义为contacts：

[]

2-或者在使用constructor(props) { super(props) this.state = { contacts: [] } }之前进行检查：

map

要检查数组，您还可以使用{this.state.contacts && this.state.contacts.map(....)。

注意：您需要为地图中的每个元素指定唯一键，请检查 DOC 。

React无法读取undefined的属性映射

1 个答案: