传递 node.js 字符串以响应前端

Question

我在 node.js 后端函数上有这个：

    app.get('/returnTestValues', (req, res) => {
   
    var results = "hello friends"
    res.send(results);
})

然后在前端，（反应），我有这个：

     import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'

const Collapse = styled.div.attrs({
    className: 'collpase navbar-collapse',
})``

const List = styled.div.attrs({
    className: 'navbar-nav mr-auto',
})``

const Item = styled.div.attrs({
    className: 'collpase navbar-collapse',
})``


// this.setState = { results: null };

fetch('http://localhost:3000/returnTestValues', {
  method: 'POST',
})
.then((response) => {
  console.log('response is: ' + response);
  response.json().then((results)=>this.setState({ results: results }))
  
}).then(results => {
    

   
    
    // let response = await response.json();
    this.setState({ results: results });
    console.log('results are' + results)
    

    

});

// function 



class Links extends Component {
    render() {
        return (
            <React.Fragment>
                <Link to="/" className="navbar-brand">
                {this.state.results}

                </Link>
                <Collapse>
                    <List>
                        <Item>
                            <Link to="/movies/list" className="nav-link">
                                List Movies
                            </Link>
                        </Item>
                        <Item>
                            <Link to="/movies/create" className="nav-link">
                                Create Movie
                            </Link>
                        </Item>
                    </List>
                </Collapse>
            </React.Fragment>
        )
    }
}


export default Links

以上是整个文件的完整代码。 没有一行丢失。 但是，当我这样做时，它说：

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

我猜也许 setState 之前没有定义过，并且在我定义它之前它不会将其视为可以使用的东西？

另外， console.log('response is: ' + response); 返回[object Response]

全新的反应，不知道如何做到这一点。 谢谢您的帮助

Answer 1

移动你取到componentDidMount类组件内

class Links extends Component {

 state = {
    results: []
 }

  componentDidMount() {

    fetch('http://localhost:3000/returnTestValues', {
      method: 'POST',
    })
      .then((response) => {
        console.log('response is: ' + response);
        return response.json()

      }).then(results => {

        // let response = await response.json();
        this.setState({ results: results });
        console.log('results are' + results)
      });
  }


  render() {
    return (
      <React.Fragment>
        <Link to="/" className="navbar-brand">
          {this.state.results}

        </Link>
        <Collapse>
          <List>
            <Item>
              <Link to="/movies/list" className="nav-link">
                List Movies
                            </Link>
            </Item>
            <Item>
              <Link to="/movies/create" className="nav-link">
                Create Movie
                            </Link>
            </Item>
          </List>
        </Collapse>
      </React.Fragment>
    )
  }
}


export default Links

Answer 2

看起来this没有在该范围内定义。 尝试async/await范式：

let response = await response.json();
this.setState({ response });

Answer 3

您的状态构造函数应如下所示，以便您可以调用 setState 方法

class Links extends Component {

    constructor(props) {
        super(props);
    
        this.state = {
          results: []
        };
    render() {
        return (
            <React.Fragment>
                <Link to="/" className="navbar-brand">
                {this.state.results}

                </Link>
                <Collapse>
                    <List>
                        <Item>
                            <Link to="/movies/list" className="nav-link">
                                List Movies
                            </Link>
                        </Item>
                        <Item>
                            <Link to="/movies/create" className="nav-link">
                                Create Movie
                            </Link>
                        </Item>
                    </List>
                </Collapse>
            </React.Fragment>
        )
    }
}