React.js中的GET请求到服务器

Question

我有一个SearchBar和Profile组件，我想向服务器发出GET请求：http://awesomeserver/users。服务器中的数据位于对象数组中。我希望能够在搜索栏中输入用户名，当我单击“搜索”时，我想在页面上显示该用户的名字，姓氏和电子邮件。例如，当我搜索jsmith时，我要显示：名字：John，姓氏：Smith，电子邮件：jsmith@gmail.com。为了做到这一点，我需要将它们传递props给Profile组件。我正在使用axios发出请求，但是我想我没有正确使用它。如何按用户名搜索，但仅检索名字，姓氏和电子邮件？

这是服务器中示例数据的样子：

{
  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: jsmith@gmail.com,
  hobby: hiking,
  id: 1
}

到目前为止，这是我的代码：

//Profile Component

import React, { Component } from 'react';


class Profile extends Component {
  render() {
    return (
        <div>
            <div>First Name: {this.props.firstName}</div>
            <div>Last Name: {this.props.lastName}</div>
            <div>Email: {this.props.email}</div>
        </div>
    );
  }
}

export default Profile;



//SearchBar component

import React, { Component } from 'react';
import axios from 'axios';

import Profile from './Profile';

class SearchBar extends Component {

  constructor(props) {
  super(props);
  this.state = {
    fetchUser: {
      username: '',
      firstName: '',
      lastName: '',
      email: '',
      hobby: ''
    }
  }
  this.fetchUser = this.fetchUser.bind(this);
}


 fetchUser() {
    var id = this.refs.id.value;

    axios.get('http://awesomeserver/users/${id}')
      .then(resp => resp.json()) 
      .then( (response) => {
        console.log(response);
        this.setState({
          fetchUser: response.data
        });
      })
      .catch( (error) => {
        console.log(error);
      });  
  }

  render() {
    return (
      <div>
          <input ref="id" placeholder="Enter in a username" />
          <button onClick={this.fetchUser}>Search</button>
          <Profile firstName={this.fetchUser.firstName} lastName={this.fetchUser.lastName} email={this.fetchUser.email} />
      </div>
    );
  }
}

export default SearchBar;

Answer 1

你这里使用 axios 的方式不对，我们需要正确设置返回值到 props，还需要正确绑定 axios 回调函数，比如你的代码应该是这样的：

import React, { Component } from 'react';


class Profile extends Component {
  render() {
    return (
        <div>
            <div>First Name: {this.props.firstName}</div>
            <div>Last Name: {this.props.lastName}</div>
            <div>Email: {this.props.email}</div>
        </div>
    );
  }
}

export default Profile;



//SearchBar component

import React, { Component } from 'react';
import axios from 'axios';

import Profile from './Profile';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchUser: {
        username: '',
        firstName: '',
        lastName: '',
        email: '',
        hobby: ''
      }
    }
    this.fetchUser = this.fetchUser.bind(this);
  }

  fetchUser() {
    axios.get('http://awesomeserver/users.username')
      .then( (response) => {
        console.log("response", response);
        this.setState({
          fetchUser: response.data
        });
        console.log("fetchUser", this.state.fetchUser);
      })
      .catch( (error) => {
        console.log(error);
      });  
  }

  render() {
    return (
      <div>
          <input placeholder="Enter in a username" />
          <button onClick={this.fetchUser}>Search</button>
          <Profile firstName={this.state.fetchUser.firstName} lastName={this.state.fetchUser.lastName} email={this.state.fetchUser.email} />
      </div>
    );
  }
}

export default SearchBar;  

还请检查response控制台中的 ，以确保您获得了正确的对象。如果有的话，请在此处发布控制台中的一些错误，谢谢！