APIからのデータの再利用| React

Question

私はAPIから取得したデータをREACTの別のコンポーネントに送信しようとしていますが、どうすればよいですか？私は "小道具"を試しましたが、私はまだ初心者で、他のコンポーネントにデータを渡す方法はありません。<h2> John Doe </ h2>の "user.jsx"のコードでわかるように、何かアドバイス、 "usuario" APIから来てください

api.jsx

import React from 'react' 
import MenuProfile from './user.jsx' 


export default class Cliente extends React.Component { 
    constructor() { 
     super() 
     this.state = { clientId: '', usuario: '' } 
    } 
    componentWillMount() { 
     fetch('MYURL', { 
     method: 'POST', 
     body: JSON.stringify({ 
      usuario: 'test', 
      password: 'test', 
     }) 

     }) 
     .then((response) => { 
     return response.json() 
     }) 
     .then((data) => { 
     this.setState({ clientId: data.clientId, usuario: data.usuario }) 
     }) 
    } 
    render() { 
     return (
      // Testing if the state prints with success 
      <div className="container-fluid"> 
      <div>{this.state.usuario}</div> <---- this data (name) 
      </div> 
     ); 
     } 
} 

user.jsx

import React from 'react'; 
import Cliente from './api.jsx' 

export default class MenuProfile extends React.Component { 
    render() { 
    console.log(); 
    return (
     <div className="profile"> 
     <div className="profile_pic"> 
      <img src="../assets/images/img.jpg" alt="..." className="img-circle profile_img"></img> 
     </div> 
     <div className="profile_info"> 
      <span>Welcome,</span> 
      <h2>Jhon Doe</h2> <---- insert here (from api.jsx) 
     </div> 
     </div> 
     ); 
    } 
} 

Answer 1

そのためにMenuProfileをClienteの下に電話する必要があります。

インポートは、私が作成したなど、API呼び出しを行うデータを格納し、データの再利用に関連する定型がたくさんある 輸入MenuProfileを「反応」から

export default class Cliente extends React.Component { 
    constructor() { 
     super() 
     this.state = { clientId: '', usuario: '' } 
    } 
    componentWillMount() { 
     fetch('MYURL', { 
     method: 'POST', 
     body: JSON.stringify({ 
      usuario: 'test', 
      password: 'test', 
     }) 

     }) 
     .then((response) => { 
     return response.json() 
     }) 
     .then((data) => { 
     this.setState({ clientId: data.clientId, usuario: data.usuario }) 
     }) 
    } 
    render() { 
     return (
      // Testing if the state prints with success 
      <div className="container-fluid"> 
      <div>{this.state.usuario}</div> <---- this data (name) 
      <MenuProfile name={this.state.usuario} /> 
      </div> 
     ); 
     } 
} 


import React from 'react'; 
import Cliente from './api.jsx' 

export default class MenuProfile extends React.Component { 
    render() { 
    cont {name} = this.props 
    console.log(); 
    return (
     <div className="profile"> 
     <div className="profile_pic"> 
      <img src="../assets/images/img.jpg" alt="..." className="img-circle profile_img"></img> 
     </div> 
     <div className="profile_info"> 
      <span>Welcome,</span> 
      <h2>{name}</h2> <---- insert here (from api.jsx) 
     </div> 
     </div> 
     ); 
    } 
}