[英]re-render component after post request api react
After a post request, the data gets inside the database but it is not re rendering the component.发布请求后,数据进入数据库,但不会重新呈现组件。 I need to manually press the F5 button and the new data will be displayed.
我需要手动按下 F5 按钮,才会显示新数据。 It seems like the
then
is not executing.似乎
then
没有执行。
class AddForm extends Component {
constructor(props) {
super(props)
this.state = {
id: null,
title: "",
price: 0,
pages: 0,
};
}
postData() {
const { title, price, pages } = this.state
const curTitle = title
const curPrice = price
const curPages = pages
fetch("api/books", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
Title: title,
Price: price,
NumberOfPages: pages
})
}).then(res => res.json()).then(() => this.setState({ title: curTitle, price: curPrice, pages: curPages }))
}
}
Edit: When I do the following:编辑:当我执行以下操作时:
.then(response => response.json()).then(res => console.log(res))
I get Uncaught (in promise) SyntaxError: Unexpected end of JSON input
我得到
Uncaught (in promise) SyntaxError: Unexpected end of JSON input
Well from your question it looks like that you are able to make the state update on submitting, the only problem is regarding displaying the data, for that I may suggest you to put another component for displaying the data.那么从您的问题来看,您似乎可以在提交时进行状态更新,唯一的问题是关于显示数据,为此我可能建议您放置另一个组件来显示数据。 It had worked for me in the past.
过去它对我有用。 Just let me know whether it worked for you.
只要让我知道它是否对你有用。
res => res.json() : this gives a JSON response, bind this JSON response values to the state in the setState. res => res.json() :这给出了一个 JSON 响应,将此 JSON 响应值绑定到 setState 中的状态。
Hoping your response will be like below,希望您的回复如下所示,
response.data = {
curTitle: 'some title',
curPrice: 'some price',
curPages: 'some pages'
}
Change your fetch call second then function like below,第二次更改您的 fetch 调用,然后功能如下,
constructor(props) {
super(props)
this.state = {
id: null,
title: "",
price: 0,
pages: 0,
};
this.postData = this.postData.bind(this); // Add this line, cannot read property error will be gone.
}
fetch("api/books", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
Title: title,
Price: price,
NumberOfPages: pages
})
}).then(res => res.json()).then((responseJson) => {
console.log(responseJson); // what is the output of this?
this.setState({
title: responseJson.data.curTitle,
price: responseJson.data.curPrice,
pages: responseJson.data.curPages
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.