![](/img/trans.png)
[英]Can't send POST request from React front-end to Node.js back-end
[英]passing node.js string to react front end
我在 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]
全新的反应,不知道如何做到这一点。 谢谢您的帮助
移动你取到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
看起来this
没有在该范围内定义。 尝试async/await
范式:
let response = await response.json();
this.setState({ response });
您的状态构造函数应如下所示,以便您可以调用 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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.