.net React中的API请求
我正在尝试用react构建一个.net核心web应用程序。然而,我正在努力处理一些api调用和函数。以前可能会有人问这个问题,但我自己找不到解决办法.net React中的API请求,.net,reactjs,api,asp.net-core,.net,Reactjs,Api,Asp.net Core,我正在尝试用react构建一个.net核心web应用程序。然而,我正在努力处理一些api调用和函数。以前可能会有人问这个问题,但我自己找不到解决办法 class Documents extends Component{ constructor(props){ super(props); this.state = { docs: [] }; this.deleteHandle = this.deleteHandle.bind(this); }
class Documents extends Component{
constructor(props){
super(props);
this.state = {
docs: []
};
this.deleteHandle = this.deleteHandle.bind(this);
}
componentDidMount(){
const url = 'api/Documents';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) =>{
this.setState({
docs: data
});
})
.catch((error) => console.log(error));
}
renderDocuments(){
return this.state.docs.map((doc) => (
<Doc key={doc.id} doc = {doc}/>
));
}
deleteHandle(id) {
fetch('api/Documents/'+id, { method: 'DELETE' })
.then((response) => {
return response.json();
})
.catch((error) => console(error));
}
render(){
return (
<ul>
{this.renderDocuments()}
</ul>
);
}export default Documents;
这是我的Doc.js
const Doc = ({ doc }) => (
<li>
<p>{doc.id} - {doc.documentCode} - {doc.documentName} - {doc.issuedDate}</p>
<a onClick={this.deleteHandle(doc.id)}>Delete</a>
</li>);export default Doc;
API和Get工作正常,但当我单击DELETE按钮时,它显示:_this.deleteHandle不是函数
请帮助,非常感谢。您的问题是直接调用deleteHandle,而不是传递调用它的函数。使用箭头函数,解决方案非常简单:
<a onClick={()=> this.deleteHandle(doc.id)}>Delete</a>
您的问题是直接调用deleteHandle,而不是传递调用它的函数。使用箭头函数,解决方案非常简单:
<a onClick={()=> this.deleteHandle(doc.id)}>Delete</a>
文档没有名为deleteHandle的属性。只有文档才有。您需要将处理程序传递给文档:
文档没有名为deleteHandle的属性。只有文档才有。您需要将处理程序传递给文档:
您需要将删除事件传递给每个文档,以便可以使用:
renderDocuments(){
return this.state.docs.map((doc) => (
<Doc key={doc.id} doc = {doc} onDelete={(id) => this.deleteHandle(id)} />
));
}
您需要将删除事件传递给每个文档,以便可以使用:
renderDocuments(){
return this.state.docs.map((doc) => (
<Doc key={doc.id} doc = {doc} onDelete={(id) => this.deleteHandle(id)} />
));
}
const Doc = ({ doc, onDelete }) => (
<li>
<p>{doc.id} - {doc.documentCode} - {doc.documentName} - {doc.issuedDate}</p>
<a onClick={onDelete(doc.id)}>Delete</a>
</li>);
export default Doc;