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

Posted 2023-03-15

【中文标题】将 React.js 中的 GET 请求发送到服务器

【英文标题】：GET request in React.js to a server

【发布时间】：2017-10-19 06:51:43

【问题描述】：

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

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

  username: jsmith,
  firstName: John,
  lastName: Smith,
  email: [e-mail],
  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;

【参考方案1】：

您在单击搜索按钮时调用fetchUsers 函数，因此不是返回响应，而是使用setState 设置状态变量中的数据，当您执行setState 时，react 将重新渲染组件，它会将配置文件数据传递给 Profile 组件。

像这样编写 SearchBar 组件：

class SearchBar extends Component 

  constructor()
      super();
      this.state = 
          profileDetails: 
      
      this.fetchUser = this.fetchUser.bind(this);
  

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

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

查看DOC 了解有关...的详细信息。

【讨论】：

遇到任何问题？

【参考方案2】：

你可以这样发出 axios 请求。 Axios 结果是异步的，它不会从函数返回结果，所以this.fetchUsers.firstName 等是没有意义的。调用函数并将结果保存在 axios 回调中的状态中，如

class SearchBar extends Component 
  state = 
        firstName: '',
        lastName: '',
        email: ''
  
  fetchUser = () => 
      axios.get('http://awesomeserver/users.username')
            .then(res => 
                 return res.json()
            ).then(response => 
                  this.setState(firstName: response.firstName, lastName: response.lastName, email: response.email)
             )
  

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


export default SearchBar;

【参考方案3】：

这里你使用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，以确保您获得了正确的对象。如果有任何错误，请在此处发布控制台的一些错误，谢谢！

【讨论】：

我尝试了您的解决方案，response 是一个对象，而 data 属性是对象数组。这是有效的，但是当我尝试进行搜索时，我收到了 404 的错误消息。仅当我尝试搜索 John Smith、Jane Doe 等姓名时才会发生这种情况。此外，我无法检索到正确的数据，例如名字和姓氏。是不是因为response 不是对象数组？如何仅检索与搜索栏对应的用户名数据？

刚刚把axios回调改了一点，请重试！好像第一个“.then()”会返回http响应对象，那么我们应该先将它转换成json。但是，您是否在控制台、响应对象或其他错误上看到了什么？

如果响应是带有数据键的对象，请使用“response.data”。关于你的搜索返回404，表示你的api找不到，或者你可以升级你的api，如果用户尝试搜索一些不存在的名字，你应该返回虚拟数据，或者返回“has_data：false”（添加到 json 结果）

我刚刚意识到该对象有 id，我应该按 id 而不是名称搜索。我没有得到404 错误。我很抱歉让你感到困惑。至于响应对象，我确实得到了一个不同的错误。这是错误：TypeError: resp.json is not a function。我什至尝试将其更改为 resp.data.json() 并得到相同的错误，除了它是 resp.data.json is not a function。你知道是什么原因造成的吗？此外，我更新了原始帖子中的代码以匹配所做的所有更改。

好的，如果 API 现在返回正常，请改回我以前的版本，但将“response.data”绑定到我们的“fetchUser”（请参阅​​上面我修改后的答案）。如果它仍然不起作用，请随时向我展示“响应”和“this.state.fetchUser”真正返回的内容（我使用 console.log 捕获它们）