未定義

Question

のプロパティマップIが反応するのは非常に新しいですし、私はレールAPIからデータを取り込むしようとしていますが、私が見ることができる私は反応するのdevのツールを使用している場合、私はエラーTypeError: Cannot read property 'map' of undefined

を取得していますを読み取ることができませんリアクト状態と私はそれを使用してコンソールでそれを使いこなす場合、私は連絡先を見ることができます$r.state.contacts誰かが私が間違って何を手伝ってくれる？私のコンポーネントは次のようになります。componentDidMountので、あなたは、コンストラクタ内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

初期レンダリングの後と最初のthis.state.contactsが未定義なり、レンダリング中に呼び出されます。どちらの

Cannot read property 'map' of undefined

コンストラクタ内contactsを定義します：それはあなたがエラーを取得している理由です

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

それとも上のマップを使用する前にチェックを入れて：

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

注：をマップ内の各要素に一意のキーを割り当てる必要があります。DOC。