Question

使用Node.js和React.js从获取发布请求中保存数据时遇到麻烦。我正在从React组件类中的函数调用获取请求。我想从数据库中查询一些用户名，然后将其保存到React组件实例变量之一，即“ this.userid”，但是，每当我将值分配给其中一个空变量时，我都会在“ .then”语句之外对其进行检查您可以看到它从未分配过。

有人知道执行获取请求的方法或正确方法吗？我正在创建一个简单的登录请求，并希望在用户ID从API返回后将其保存。

class LandingPage extends React.Component {
constructor(props) {
    super(props) 
    this.data = data
}   
login(e){
    var that = this;
    function log(id){
       that.userid = id
    }
    fetch("/login", {
        method: "POST",
        headers: {
            'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
            },
        body: JSON.stringify(this.data)
    }).then(response => {
        return response.json();
    })
    .then(json =>log(json.userid))
   /both show undefined
   console.log(that.userid, this.userid)  
   }

Answer 1

您正在检查then范围之外的数据。它在那里不存在，因此您必须使用.then（）中的检索到的数据来调用setState。

更改 .then(json =>log(json.userid))

.then(json => {
  that.setState({userid: json.userid})
})

然后，在组件更新后，具有用户ID的状态可用

更新：或者，您可以使用async await并像这样构建它：

import React from 'react';

class MyComponent extends React.Component {

  state = {
    userId: null
  }

  useFetch = async e => {
    const raw = await fetch("/login", {
      method: "POST",
      headers: {
        'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(this.data)
    });

    const json = await raw.json();

    this.setState({
      userId:json
    }, () => console.log(this.state))
  }

  render() {
    if (this.state.userId === null)
      this.useFetch();
    return (
      <div>Loading some data</div>
    )
  }
}

export default MyComponent;

经过测试的有效组件。

无法保存请求后的正文数据

1 个答案: