web-dev-qa-db-ja.com

React未定義のプロパティマップを読み取れません

私は反応が非常に新しいので、Rails apiからデータを取り込もうとしていますが、エラーTypeError: Cannot read property 'map' of undefinedが発生しています。

反応開発ツールを使用すると、状態を確認でき、$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;
javascriptreactjsecmascript-6fetch-api
10
Ollie2619

未定義のプロパティ「マップ」を読み取れません、なぜですか？

_this.state_は最初は_{}_であり、_{}_のcontactsはundefinedになるためです。重要な点は、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 [〜＃〜]。

17
Mayank Shukla