包含抛出"TypeError: Cannot read property 'onSubmit' of undefined"按钮的映射数据

Question

我正在编写一个全栈应用程序，它显示来自我的 sql 服务器的问题并显示在前端。 在每个问题中都有一个接受和拒绝按钮。我只是希望我的接受向我的数据库发送响应，并拒绝向我的数据库发送响应(当然两者都不同(。

但是，当创建问题并创建绑定到句柄提交的提交时，它会抛出错误(如下所列(。

我将如何为每个答案进行两个单独的句柄提交，然后将数据发送到另一个表，但使用映射问题的 ID，以便它可以用作外键。

这是因为它是映射数据吗？

有问题的代码

import React, { Component } from "react";
import "./customers.css";
import { Link } from "react-router-dom";
class DisplayUsers extends React.Component {
constructor() {
super();
this.state = { questions: [], QuestionsAnswer: [], QuestionsSeverity: [] };
this.onSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.setState({
questions: this.getItems()
});
}
getItems() {
fetch("/user-questions")
.then(recordset => recordset.json())
.then(results => {
console.log(results.recordset);
this.setState({ questions: results.recordset });
});
}
handleSubmit(e) {
e.preventDefault();
const data = {
QuestionsAnswer: this.state.QuestionsAnswer,
QuestionsSeverity: this.state.QuestionsSeverity
};
fetch("/Question-Response", {
method: "POST", // or 'PUT'
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log("Success:", data);
})
.catch(error => {
console.error("Error:", error);
});
}
render() {
console.log(this.state.questions);
return (
<ul>
{this.state.questions &&
this.state.questions.map(function(question, index) {
return (
<div className="jumbotron">
<li> Question ID: {question.QuestionId}</li>
<li> Question:{question.Question}</li>
<li>
<button onClick={this.onSubmit}>Accepted</button> 
<button>Declined</button>
</li>
<li>
<textarea
onChange={e =>
this.setState({ QuestionsAnswer: e.target.value })
}
rows="4"
cols="160"
id="TITLE"
></textarea>
</li>
</div>
);
})}
</ul>
);
}
}
export default DisplayUsers;

错误

Uncaught (in promise) TypeError: Cannot read property 'onSubmit' of undefined
at DisplayQuestions.js:62
at Array.map (<anonymous>)
at DisplayUsers.render (DisplayQuestions.js:54)
at finishClassComponent (react-dom.development.js:18470)
at updateClassComponent (react-dom.development.js:18423)
at beginWork$1 (react-dom.development.js:20186)
at HTMLUnknownElement.callCallback (react-dom.development.js:336)
at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
at invokeGuardedCallback (react-dom.development.js:440)
at beginWork$$1 (react-dom.development.js:25780)
at performUnitOfWork (react-dom.development.js:24695)
at workLoopSync (react-dom.development.js:24671)
at performSyncWorkOnRoot (react-dom.development.js:24270)
at react-dom.development.js:12199
at unstable_runWithPriority (scheduler.development.js:697)
at runWithPriority$2 (react-dom.development.js:12149)
at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
at flushSyncCallbackQueue (react-dom.development.js:12182)
at scheduleUpdateOnFiber (react-dom.development.js:23709)
at Object.enqueueSetState (react-dom.development.js:13994)
at DisplayUsers.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)
at DisplayQuestions.js:23

Answer 1

范围问题。

在渲染函数中，在console.log(this.state.questions);上方添加var self = this;，然后使用self.onSubmit。

您属于this.state.questions.map的回调函数的范围，因此this不引用该组件。

render() {
var self = this;
console.log(this.state.questions);
return (
<ul>
{this.state.questions &&
this.state.questions.map(function mapFn(question, index) {
...
// this === scope of mapFn ↑ which is undefined
// self === scope of render function
<button onClick={self.onSubmit}>Accepted</button> 
....
</ul>
);
}

编辑

另一种可能更好的方法是将范围传递给 map 函数

this.state.questions.map(function(question, index) {
// this === scope of render function
}, this)