fire-baseのデータを取得する反応ルータ一致パラメータの使用方法

Question

連絡先リストを表示する連絡先アプリがあります。連絡先ページから連絡先をクリックしたときにルートをレンダリングできるようにしたいと考えています。私はこの

class Contacts extends React.Component { 
constructor() { 
super(); 
this.state = { 
    contactslist: [] 
} 
} 

componentWillMount(){ 
let contactslistRef = firebase.database().ref('contactslist'); 
let _this = this; 
contactslistRef.on('value', (snapshot) => { 
let contactslist = snapshot.val(); 
    let newState = []; 
    for (let contact in contactslist) { 
    newState.push({ 
     id: contact, 
     name: contactslist[contact].name, 
     phone: contactslist[contact].phone 
    }); 
    } 
console.log(snapshot.val()); 
_this.setState({ 
contactslist: newState 

    }); 
}) 
} 
render() { 
return (
    <div className='app'> 
    <h1>Contacts list</h1> 
    <ul> 
    {this.state.contactslist.map((contact) => { 
    return (
     <li key={contact.id}> 
     <Link to={`/contact/${contact.id}`}>{contact.name} {contact.phone}</Link> 
     </li> 
    ) 
    })}</ul> 
</div> 

); 
} 
} 
export default Contacts; 

私の連絡先のコンポーネントがこの

const Contact = (props) => { 
const contact = (props.match.params.id) 
return (
<div className="card"> 
    <h1>{props.name}</h1> 
    <h2>Phone:{props.phone}</h2> 
    <Link to='/contacts'>Back</Link> 
</div> 
) 
} 

export default Contact; 

そして、私のようなものであるように、私はちょうど Myコンタクトコンポーネントをレンダリングするために、単一の接点が見え得ることができない問題が連絡先の完全なリストをレンダリング全くありませんすべてのルートを含むメインコンポーネントを持っている

const Main =() => (
<main> 
<Switch> 
    <Route exact path='/' component={Home}/> 
    <Route path='/contacts' component={Contacts} /> 
    <Route path='contacts/:id' component={Contact} /> 
</Switch> 
</main> 
) 
export default Main 

Answer 1

あなたはurlからパラメータを取得でき、あなたの連絡先に関する詳細情報をfirから受け取ることができますebase。

class Contact extends React.Component{ 
    state = { 
    detail: {} 
    } 

    componentDidMount(){ 
    const {id} = this.props.match.params; 
    const _this = this; 

    if (!id) return; 

    const detail = firebase.database().ref('contactslist/' + id); 

    detail.on('value', function(snapshot) { 
    _this.setState({ 
     detail: snapshot.val() 
    }); 
    }); 
    }  
}