React | Uncaught TypeError: this.props.methodfromparent不是一个函

Question

React相对较新!我一直得到这个错误信息。我不知道我做错了什么。帮助感激。

Uncaught TypeError: this.props.getDataFromRun is not a function

我基本上想从Run.js到TestReport.js的状态和一些指南说，它的工作原理，当我有状态对象在我的父文件(TestReport.js)和传递一个函数给我的孩子，但不知怎的，我总是得到错误消息，getDataFromRun不是我的子组件的函数。

TestReport.js

function Overview(Component) {
return function OverviewComponent(props) {
const { open, toggleOpen } = React.useContext(OpenContext);
return <Component {...props} open={open} toggleOpen={toggleOpen} />;
}
}
class TestReport extends React.Component {
constructor() {
super();
this.state = {
tests: 0,
failedTests: 0,
testcaseName: [],
failureMessage: [],
failureType: [],
timestamp: new Date()
}
}

getDataFromRun(data) {
this.setState({
tests: data.tests,
failedTests: data.failedTests,
testcaseName: data.testcaseName,
failureMessage: data.failureMessage,
failureType: data.failureType,
timestamp: data.timestamp
});
}

render() {
const open = this.props.open;
const toggleOpen = this.props.toggleOpen;
return (
<Run getDataFromRun={this.getDataFromRun}/> {/* Shows the runs */}
);
}
}
export default Overview(TestReport);

Run.js

export default class Run extends React.Component {
constructor() {
super();
this.state = {
tests: 0,
failedTests: 0,
testcaseName: [],
failureMessage: [],
failureType: [],
timestamp: new Date()
}
}
componentDidMount() {
// fetch tests from xml
this.getTests().then(result => this.setState({
tests: result.tests,
failedTests: result.failedTests,
testcaseName: result.testcaseName,
failureMessage: result.failureMessage,
failureType: result.failureType,
timestamp: result.timestamp
}));
this.props.getDataFromRun(this.state);
}
getTests() {
// returns data of an xml-file 
}
render() {
return (
Run with {this.state.tests} tests and {this.state.failedTests} failed        
);
} 
}

Answer 1

您需要在构造函数中绑定getDataFromRun函数，然后才能在呈现的组件中调用该函数。你的构造函数应该是这样的:

constructor() {
super();
this.state = {
tests: 0,
failedTests: 0,
testcaseName: [],
failureMessage: [],
failureType: [],
timestamp: new Date()
}
this.getDataFromRun = this.getDataFromRun.bind(this);
}

或者像这样使用箭头函数:

const getDataFromRun = (data) => {
this.setState({
tests: data.tests,
failedTests: data.failedTests,
testcaseName: data.testcaseName,
failureMessage: data.failureMessage,
failureType: data.failureType,
timestamp: data.timestamp
});
}