在ReactJS中檢索返回的POST數據

Question

我一直在嘗試調用服務器端POST函數來驗證Web應用程序中的用戶。 我的ExpressJS和我的ReactJS環境都配置正確，一個在端口3000上，另一個在3001上。

我能夠調用函數並執行服務器端的Express代碼，但是當我嘗試訪問React中的返回值時，該值似乎未定義。 會愛一些幫助！

反應代碼：

import React, { Component } from 'react';

export default class tem extends Component {
  constructor(props) {
    super(props);

    var testVar = {
      key: "0000000000",
      status: false
    };
    this.state = {
      users: [],
      username: "",
      password: "",
      submitted: "yes",
      responseData: testVar
    };
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handlePassChange = this.handlePassChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.getResponse = this.getResponse.bind(this);
  }

  handleNameChange(e) {
    this.setState({ username: e.target.value });
  }
  handlePassChange(e) {
    this.setState({ password: e.target.value });
  }

  getResponse(urlPath, user, pass) {
    let setResp = this;
    fetch(urlPath, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: this.state.username,
        password: this.state.password
      })
    })
      .then(function(response) {
        return response.json();
      })
      .then(function(response) {
        setResp.setState({ responseData: response });
      });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.setState({ submitted: "YES" });
    this.setState({
      responseData: this.getResponse(
        "/login",
        this.state.username,
        this.state.password
      )
    });
  }

  render() {
    return (
      <div>
        <h1>login </h1>
        Enter your username
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            onChange={this.handleNameChange}
          />
          Enter your password
          <input
            type="password"
            placeholder="enter password"
            value={this.props.filterText}
            onChange={this.handlePassChange}
          />
          <button type="submit">Start</button>
        </form>
        {this.state.responseData.key}
        {this.state.submitted}
      </div>
    );
  }
}

我后來試圖訪問reponseData.key，我收到以下錯誤：

錯誤截圖

我輸出的JSON是：

{
    "key": "408f51qk54",
    "status": true
}

我通過Postman嘗試了它，它工作正常。 我無法弄清楚錯誤是什么！

Answer 1

response.json()返回一個promise，因此在使用setState的響應之前，請確保在promise鏈中返回該promise。

let setResp = this;
fetch(urlPath, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    username: this.state.username,
    password: this.state.password
  })
})
  .then(function(response) {
    return response.json();
  })
  .then(function(response) {
    setResp.setState({ responseData: response });
  });

你不應該調用setState從結果this.getResponse或者，因為你沒有從回國任何this.getResponse ，它是異步的。 這將使您的responseData undefined.

只需調用this.getResponse ：

handleSubmit(event) {
  event.preventDefault();
  this.setState({ submitted: "YES" });
  this.getResponse(
    "/login",
    this.state.username,
    this.state.password
  );
}

Answer 2

例如，您將從.post返回數據：

app.post('/', function (req, res) {
// server side code
    res.json(/*returning data*/);
});

所以在React代碼中你可以像這樣檢索它：

functionThatMakePostRequest = (args) => {
const data = {
    id: 555,
    name: "name",
};

fetch('/', {
    method: 'post',
    body: JSON.stringify(data),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
})
.then(res => res.json()) //returns array of data
.then(res => this.setState({ res })); //assign state to array res
};