Свойства класса должны быть методами. Ожидается '(' но вместо этого видел '='

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

Что не так с методом?

import React, { Component } from 'react';

import { Row, Col } from 'antd';
import PageHeader from '../../components/utility/pageHeader';
import Box from '../../components/utility/box';
import LayoutWrapper from '../../components/utility/layoutWrapper.js';
import ContentHolder from '../../components/utility/contentHolder';
import basicStyle from '../../settings/basicStyle';
import IntlMessages from '../../components/utility/intlMessages';
import { adalApiFetch } from '../../adalConfig';

const data = {
  TenantId: this.this.state.tenantid,
  TenanrUrl: this.state.tenanturl,
  TenantPassword: this.state.tenantpassword 
};

const options = {
  method: 'post',
  data: data,
  config: {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
};

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChangeEventTenantUrl = this.handleChangeEventTenantUrl.bind(this);
    this.handleChangeEventTenantPassword = this.handleChangeEventTenantPassword.bind(this);
    this.handleChangeEventTenantId= this.handleChangeEventTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEventTenantUrl(event){
    this.setState({tenanturl: event.target.value});
  }

  handleChangeEventTenantPassword(event){
    this.setState({tenantpassword: event.target.value});
  }

  handleChangeEventTenantId(event){
    this.setState({tenantid: event.target.value});
  }

  handleSubmit(event){
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
    fetchData();
  }

  fetchData = () => {
    adalApiFetch(fetch, "/tenant", options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  };

  upload(e) {

      let data = new FormData();

      //Append files to form data
      let files = e.target.files;
      for (let i = 0; i < files.length; i++) {
        data.append('files', files[i], files[i].name);
      }

      let d = {
        method: 'post',
        url: API_SERVER,
        data: data,
        config: {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        },
        onUploadProgress: (eve) => {
          let progress = utility.UploadProgress(eve);
          if (progress == 100) {
            console.info("Done");
          } else {
            console.info("Uploading...",progress);
          }
        },
      };
      let req = axios(d);

      return new Promise((resolve)=>{
          req.then((res)=>{
              return resolve(res.data);
          });
      });

  }

  render(){
    const { data } = this.state;
    const { rowStyle, colStyle, gutter } = basicStyle;

    return (
      <div>
        <LayoutWrapper>
        <PageHeader>{<IntlMessages id = "pageTitles.TenantAdministration" />}</PageHeader>
        <Row style = {rowStyle} gutter = {gutter} justify = "start">
          <Col md = {12} sm = {12} xs = {24} style = {colStyle}>
            <Box
              title = {<IntlMessages id = "pageTitles.TenantAdministration" />}
              subtitle = {<IntlMessages id = "pageTitles.TenantAdministration" />}
            >
              <ContentHolder>
              <form onSubmit = {this.handleSubmit}>
                <label>
                  TenantId:
                  <input type = "text" value = {this.state.tenantid} onChange = {this.handleChangeEventTenantId} />
                </label>
                <label>
                  TenantUrl:
                  <input type = "text" value = {this.state.tenanturl} onChange = {this.handleChangeEventTenantUrl} />
                </label>
                <label>
                  TenantPassword:
                  <input type = "text" value = {this.state.tenantpassword} onChange = {this.handleChangeEventTenantPassword} />
                </label>
                <label>
                  Certificate:
                  <input onChange = { e => this.upload(e) } type = "file" id = "files" ref = { file => this.fileUpload } />
                 </label>             
              <input type = "submit" value = "Submit" />
              </form>
              </ContentHolder>
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
      </div>
    );
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
15
0
11 757
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы написали свой метод fetchData в форме class property, который еще не является частью языка. Вы можете добавить плагин Babel свойства класса преобразования или пресет, в котором он есть, например предварительная установка этапа 2.

Если вы не хотите настраивать Babel, вы можете вместо этого привязать метод в своем конструкторе, как вы это делали с другими вашими методами:

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
    this.handleChangeEventTenantUrl = this.handleChangeEventTenantUrl.bind(this);
    this.handleChangeEventTenantPassword = this.handleChangeEventTenantPassword.bind(this);
    this.handleChangeEventTenantId= this.handleChangeEventTenantId.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData() {
    adalApiFetch(fetch, "/tenant", options)
      .then(response => response.json())
      .then(responseJson => {
        if (!this.isCancelled) {
          this.setState({ data: responseJson });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  // ...
}

Вы определили переменную fetchdata ранее? Если нет, возможно, вам следует сделать это в текущей строке:

var fetchdata = () => { ...

Другие вопросы по теме