Javascript 在React中更新修补程序后的状态
我试图弄清楚如何在补丁请求后自动更新状态,这样当点击按钮时,它会自动在计数器中添加类似的内容。不幸的是,它仍然需要页面加载才能更新。你在这上面看到什么了吗?非常感谢您的帮助Javascript 在React中更新修补程序后的状态,javascript,reactjs,fetch,Javascript,Reactjs,Fetch,我试图弄清楚如何在补丁请求后自动更新状态,这样当点击按钮时,它会自动在计数器中添加类似的内容。不幸的是,它仍然需要页面加载才能更新。你在这上面看到什么了吗?非常感谢您的帮助 import React, { Component } from "react"; import "./Like.css"; class Button extends Component { constructor(props) { super(props); this.state = {
import React, { Component } from "react";
import "./Like.css";
class Button extends Component {
constructor(props) {
super(props);
this.state = {
counter: this.props.counter
};
}
handleSubmit = event => {
event.preventDefault();
fetch(`http://localhost:3001/api/tracklists/${this.props.id}`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
tracklist: {
title: this.props.title,
url: this.props.url,
genre: this.props.genre,
tracklist: this.props.tracklist,
likes: this.props.counter + 1
}
})
})
.then(response => response.json())
.then(response => {
this.setState({
counter: this.props.counter
});
});
};
render() {
return (
<div className="customContainer">
<button onClick={this.handleSubmit}>{this.state.counter}</button>
</div>
);
}
}
export default Button;
import React,{Component}来自“React”;
导入“/Like.css”;
类按钮扩展组件{
建造师(道具){
超级(道具);
此.state={
柜台:这个。道具。柜台
};
}
handleSubmit=事件=>{
event.preventDefault();
取回(`http://localhost:3001/api/tracklists/${this.props.id}`{
方法:“补丁”,
标题:{
接受:“应用程序/json”,
“内容类型”:“应用程序/json”
},
正文:JSON.stringify({
跟踪列表:{
标题:this.props.title,
url:this.props.url,
流派:这个。道具。流派,
tracklist:this.props.tracklist,
喜欢:this.props.counter+1
}
})
})
.then(response=>response.json())
。然后(响应=>{
这是我的国家({
柜台:这个。道具。柜台
});
});
};
render(){
返回(
{this.state.counter}
);
}
}
导出默认按钮;
欢迎来到SO
我没有看到你的道具在任何地方声明,但我认为它是为了节省空间和可读性
您是否尝试过使用React组件的内置生命周期方法componentDidUpdate(prevProps)
在你的情况下,你会这样做
componentDidUpdate(prevProps) {
// you always need to check if the props are different
if (this.props.counter !== prevProps.counter) {
this.setState({ counter: this.props.counter });
}
}
您可以在此处找到文档:
也就是说,我不明白你为什么不直接显示道具而不是在状态下复制它。。。例如:
render() {
return (
<div className="customContainer">
<button onClick={this.handleSubmit}>{this.props.counter}</button>
</div>
);
}
render(){
返回(
{this.props.counter}
);
}
您得到的响应
JSON不能提供一些信息,比如新的喜欢数量?