Question

我正在将React应用移植到例行程序。在提交时处理表单中的数据会引发TypeError: this.createIssue is not a function at Object.createTestIssue [as click]错误。

代码如下：

class IssueList extends Component {
  state = { issues: [] };

  createIssue(newIssue) {
    const updatedIssues = this.state.issues.slice();
    newIssue.id = this.state.issues.length + 1;
    updatedIssues.push(newIssue);
    this.setState({ issues: updatedIssues });
  }

  createTestIssue() {
    const issue = {
      status: 'New',
      owner: 'Pieta',
      created: new Date(),
      title: 'Completion date should be optional'
    };
    this.createIssue(issue);
  }

  render(props, state) {
    return (
      <div>
        <h1>Issue Tracker</h1>
        <IssueFilter />
        <hr />
        <IssueTable issues={state.issues} />
        <hr />
        <IssueAdd createIssue={this.createIssue} />
        <hr />
        <button onClick={this.createTestIssue}>Add Test</button>
      </div>
    );
  }
}

export default IssueList;

我试图创建一个构造器并从构造器内部设置状态，但是有一个ReferenceError: state is not defined at new IssueList。

我查看了预先推荐用于表单的linkState模块，但是，我无法正确设置它。我是否传递一个空对象和一个包含要添加到数组中的数据的对象？像这样：

render({}, { state }) {
  ...
}

但是，这不允许我访问该状态。任何帮助表示赞赏。

Answer 1

在预先准备好的道具和状态中，已将您传递给render函数。

render(props, state) {
  ...
}

这使您可以使用destructuring#MOZDocs来

render({}, { state }) {
  ...
}

您拥有的^^不会有好处，并且可能会将状态隐藏在另一个对象后面。您应该拥有的是：

render({}, { ...state }) {
  ...
}

在我看来，最好的解决方案是假设state = {key: 'test', value: 1}：

render({}, { key, value }) {
  ...
}

如果您不希望使用道具中的任何东西，则可以使用上面显示的空对象，也可以只使用props，但不要使用它。

在PreactJS中处理表单数据

1 个答案: