Question

尝试编译我的应用TypeError: Cannot read property 'getAttribute' of undefined时出现以下错误。

我在以下行中找不到原因：if (event.target.getAttribute('name') && !sectionsClicked.includes(event.target.getAttribute('name'))) {是错误

这是主要的反应成分

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progressValue: 0,
      sectionsClicked: [],
    };

    this.handleProgress = this.handleProgress.bind(this);
  }


  handleProgress = (event) => {
    const { progressValue } = this.state;
    console.log(progressValue);
    const { sectionsClicked } = this.state;
    if (event.target.getAttribute('name') && !sectionsClicked.includes(event.target.getAttribute('name'))) {
      this.setState({
        progressValue: Math.floor((sectionsClicked.length / 77) * 100),
        sectionsClicked: sectionsClicked.push(event.target.getAttribute('name')),
      });
      console.log(sectionsClicked);
    }
  };

  render() {
    const { questions } = this.props;
    const { progressValue } = this.state;
    const groupByList = groupBy(questions.questions, 'type');
    const objectToArray = Object.entries(groupByList);


    return (
      <>
        <Progress value={progressValue} />
        <div className="text-center mt-5">
          <ul>
            {questionListItem && questionListItem.length > 0 ?
              (
                <Wizard
                  onChange={(event) => this.handleProgress(event)}
                  initialValues={{ employed: true }}
                  onSubmit={() => {
                    window.alert('Hello');
                  }}
                >
                  {questionListItem}
                </Wizard>
              ) : null
            }
          </ul>
        </div>
      </>
    );
  }
}

Answer 1

根据文档：

https://github.com/final-form/react-final-form#onchange-formstate-formstate--void

传递给onChange的预期参数不是formState事件。尝试记录传递给该函数的参数，该参数可能需要您进行更改。

Answer 2

最初在<FormSpy>中调用onChange的{{1}}组件（您向上报告给<Wizard>）传递了不是事件。类型为FormState。

在该类型上，<App>属性为target，因此您将看到错误。

如果您在文档中看到了该对象的属性，则可能会通过检查表单的脏字段并找到关联的DOM元素来获得所需的内容。

尽管如此，您极有可能找到一种无需使用DOM属性即可实现所需行为的方法。相同的undefined属性具有您可能要查找的名称。

Answer 3

此外，请查看您的方法和绑定。实际上，您正在使用三种单独的方法来修复handleProgress函数的上下文。

有关更多信息，请查看以下答案：

Can you explain the differences between all those ways of passing function to a component?

React无法读取未定义的属性“ getAttribute”

3 个答案: