TypeError: Невозможно прочитать свойство 'target' из неопределенного

Question

Я пытаюсь прочитать файл данных Excel, используя следующую функцию:

handleFiles = (f, evt) => {

    var name = f.name;
    const reader = new FileReader();
    reader.onload = evt => {

      /* Parse data */
      const bstr = evt.target.result;

      const wb = XLSX.read(bstr, { type: "binary" });
      console.log("data>>>", wb);
      /* Get first worksheet */
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      /* Convert array of arrays */
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      /* Update state */
      console.log("Data>>>", data);
    };

    reader.readAsBinaryString(evt.target.files[0]);
  };

И функция вызывается с помощью вызова кнопки:

  <Button onClick={this.handleFiles}>UPLOAD</Button>

При вызове функции ошибкаотображается как «TypeError: Невозможно прочитать свойство 'target' из undefined".Есть какие-либо решения для исправления этой ошибки?

Answer 1

Когда вы явно не передали аргументы в обработчик событий, т.е. как

<Button onClick={this.handleFiles}>UPLOAD</Button> * * 1004

первый аргумент, переданный в обработчик события handleFiles - это объект события.

Так в приведенном выше коде

handleFiles = (f, evt) => {...}

Фактический объект события - f.

Поскольку вы явно не передали второй аргумент evt обработчику событий handleFiles. Так что undefined и попытка получить доступ к свойству target из undefined выдает ошибку.

TypeError: Невозможно прочитать свойство 'target' из неопределенного

Таким образом, чтобы решить эту проблему, вы можете явно передать аргументы.

<Button onClick={(evt) => this.handleFiles('someArgument', evt)}>UPLOAD</Button>

Answer 2

Ваш код

 <Button onClick={this.handleFiles}>UPLOAD</Button>

Заменить на этот код

<Button onClick={(e)=>this.handleFiles(e)}>UPLOAD</Button>