Question

我试图将我从API获得的数据发送到REACT中的另一个组件，我该怎么办？我尝试过＆＃34;道具＆＃34;，但我还是一个新手并且没有得到如何将数据传递给另一个组件，正如你在＃34; user.jsx＆＃中的代码中看到的那样34;在<h2> John Doe </ h2>我想打印来自api＆＃34; usuario＆＃34;的数据，请提出任何建议

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。

从'react'导入React 从'./user.jsx'

导入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>
       );
  }
}

重用API中的数据应对

1 个答案: