Добавьте componentDidMount в функцию экспорта по умолчанию и получите ошибку «Неожиданный токен, ожидается»; » - PullRequest
Новая
       21

Добавьте componentDidMount в функцию экспорта по умолчанию и получите ошибку «Неожиданный токен, ожидается»; »

0 голосов
/ 19 февраля 2020

Я просто взял компонент выдвижного ящика из компонентов Material-UI. но я хочу изменить код внутри, чтобы вызвать мой API. Поэтому я использую метод componentDidMount, но я получаю ошибку Parsing error: Unexpected token, expected ";" в componentDidMount. Я также пытаюсь поместить это в export default function, но также терпит неудачу. Я не уверен, что в любом случае я ошибаюсь? или я каким-то образом могу получить свой API?

рассмотрите код ниже: 

componentDidMount() {
  const loginEmail = localStorage.getItem('loginEmail');
  this.setState({loginEmail})
  console.log(loginEmail)
  fetch(`http://localhost:9000/api/item/view${loginEmail}`,)
    .then((resp) => {
      resp.json()
        .then((res) => {
          console.log(res.data.user_info.id);
          //  localStorage.setItem('id', res.data.user_info.id);
          this.setState({data: res.data});
        })
    })
}
}

export default function PermanentDrawerLeft() {
  const classes = useStyles();
  return (
   ...// the drawer code take from material-ui.com
  );
}

1 Ответ

0 голосов
/ 19 февраля 2020

Кроме возможного плохого задания на копирование / вставку, в вашем fetch есть свисающая запятая и дополнительная закрывающая }. 

componentDidMount() {
  const loginEmail = localStorage.getItem('loginEmail');
  this.setState({loginEmail})
  console.log(loginEmail)
  fetch(`http://localhost:9000/api/item/view${loginEmail}`,) // <- dangling comma
    .then((resp) => {
      resp.json()
        .then((res) => {
          console.log(res.data.user_info.id);
          //  localStorage.setItem('id', res.data.user_info.id);
          this.setState({data: res.data});
        })
    })
}

Удалите запятую и снимите (то есть сгладьте) свой цепочку обещаний и последовательно используйте точки с запятой в конце своих выражений. 

componentDidMount() {
  const loginEmail = localStorage.getItem('loginEmail');
  this.setState({loginEmail});
  console.log(loginEmail);
  fetch(`http://localhost:9000/api/item/view${loginEmail}`)
    .then(resp => resp.json())
    .then(res => {
      console.log(res.data.user_info.id);
      //  localStorage.setItem('id', res.data.user_info.id);
      this.setState({data: res.data});
    });
}

Кроме того, я думаю, что вы перепутали функциональные компоненты и компоненты на основе классов. componentDidMount - это функция жизненного цикла реагирующего компонента на основе класса только ; это не работает таким же образом в функциональном компоненте. Как написано, это не правильный синтаксис; он должен быть внутри объекта или класса (т.е. как компонент на основе класса). Правильный синтаксис для объявления автономных функций - использовать ключевое слово function. 

function componentDidMount() {
  const loginEmail = localStorage.getItem('loginEmail');
  this.setState({loginEmail});
  console.log(loginEmail);
  fetch(`http://localhost:9000/api/item/view${loginEmail}`)
    .then(resp => resp.json())
    .then(res => {
      console.log(res.data.user_info.id);
      //  localStorage.setItem('id', res.data.user_info.id);
      this.setState({data: res.data});
    });
}
...