node.js - 将字符串从 Node Js 发送到组件 React Js

Question

我正在使用 Node Js 和 React Js 将数据从 Node 发送到 React 组件，但当我执行 response.json() 时，控制台中的状态永远不会改变，我收到了发送的字符串，但在我的组件中它是空的，并且有没有数据 。这是我的 Node.js 代码:

app.post('/try', function(req, res) {
  results='hello everybody !'
  res.send(JSON.stringify(results));
}); 

这是我的 React 组件:

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { results: null };
  }


  componentDidMount() {
    const data = new FormData();

    fetch('http://localhost:4000/try',{

      method: 'POST',
      body : data
    })
      .then(
        (response) => {
          console.log(response);
          return response.json();

        } // if the response is a JSON object
      ).then(
      success =>console.log(success) // Handle the success response object
    ).catch(
      error => null // Handle the error response object
    )
      .then(results => {
          this.setState({ results: results });
          console.log(results)

      });
  }
  render() {
    return (
      <div className="Users">
      <h1>results</h1>
      <div>this is my result: {this.state.results}</div>
    </div>
  );
  }
}

export default App;

Answer 1

首先，结果是字符串，你不必再次将其转换为字符串，

results='hello everybody !'

然后，在 react 中你没有使用正确的方法。请尝试以下代码。

fetch('http://localhost:4000/try', {
  method: 'POST',
  body: data
})
.then((response) => {
  console.log(response);
  response.json().then((result)=>this.setState({ results: results }))
} 
.catch(
  error => null // Handle the error response object

)