Question

我正在为自己制作的API创建前端，我使用React作为前端。当我尝试使用componentDidMount(){}时，出现语法错误，指出预期的;。 ;在)和{之间。似乎是什么问题？

P.S。我正在使用Visual Studio代码-探索

我试图插入分号，但这导致了更多问题。

import React from 'react';
import './App.css';

function App() {

  state = {
    students: []
  }

  componentDidMount(){
    this.getStudents();
  }

  getStudents = _ => {
    fetch('http://localhost:4000/students')
    .then(response => response.json())
    .then(response => this.setState({students: response.data}))
    .catch(err => console.error(err))
  }

  renderStudent = ({student_id, name}) => <div key={student_id}>{name}</div>

  return (
    <div className="App">
      {students.map(this.renderStudent)}
    </div>
  );
}

export default App;

Answer 1

您正在将类语法混合到声明为函数的组件中。 componentDidMount是类组件上的方法。因此，即使在此之前添加功能也可以解决语法问题，也无法为您提供所需的结果。

对于功能，请使用钩子，或切换到一个基于类的组件。

Answer 2

componentDidMount()是一个React Component API，而您使用的功能组件没有该API。

Answer 3

它起作用了..i将功能App（）更改为App类扩展了Component。感谢您的帮助。

我无法解决componentDidMount中存在语法错误

3 个答案: