Question

我正在使用Node Js和React Js将数据从节点发送到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

您无法将普通字符串转换为JSON。

例如

var result = "hello everybody !"
console.log(JSON.stringify(result)); // ""hello everybody !""

这不是JSON

试试这种方式

var result = {"data" :"hello everybody !"}
console.log(JSON.stringify(result)); // "{"data":"hello everybody !"}"

Answer 2

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

results='hello everybody !'

然后，作出反应，你没有使用正确的方式。请尝试以下代码。

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

）

将节点Js中的字符串发送到组件React Js

2 个答案: