javascript - 传递 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]

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

标签： javascriptnode.jsreactjsjsx

Answer 1

将您的 fetch 移动到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