React componentDidMount“解析错误:缺少分号”

Posted

技术标签:

【中文标题】React componentDidMount“解析错误:缺少分号”【英文标题】:React componentDidMount "Parsing error: Missing semicolon" 【发布时间】:2021-07-21 12:59:41 【问题描述】:

“解析错误:缺少分号”

语法错误:client\src\App.js:缺少分号 (15:21)

componentDidMount() 行显示此错误。

完整代码如下。

import React,  Component  from "react";
import AppNavBar from "./components/AppNavbar";
import ShoppingList from "./components/ShoppingList";
import ItemModal from "./components/ItemModal";
import  Container  from "reactstrap";

import  Provider  from "react-redux";
import store from "./store";
import  loadUser  from "./actions/authActions";

import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

function App() 
  componentDidMount() 
    store.dispatch(loadUser());
  
  return (
    <Provider store=store>
      <div className="App">
        <AppNavBar />
        <Container>
          <ItemModal />
          <ShoppingList />
        </Container>
      </div>
    </Provider>
  );


export default App;

【问题讨论】:

componentDidMount 用于基于类的 React,您似乎在使用 Hooks,您不能混合使用它们。 【参考方案1】:

导入useEffect:

import  useEffect  from "react";

...并替换:

componentDidMount() 
  store.dispatch(loadUser());

与:

useEffect(() => 
  store.dispatch(loadUser());
, []);

【讨论】:

useEffect 被调用用于状态更新和初始渲染。所以在某些情况下使用 useEffect 是不明智的。 componentDidMount 仅在状态更新后调用。

以上是关于React componentDidMount“解析错误:缺少分号”的主要内容,如果未能解决你的问题,请参考以下文章

为啥 componentDidMount 在 react.js 和 redux 中被多次调用?

React componentDidMount

async/await 不适用于 ComponentDidMount 中的 react.js

text #react #componentDidMount

React componentDidMount“解析错误:缺少分号”

Apollo + React:数据未出现在 componentDidMount 生命周期中