我如何在 ReactJS 的 ComponentDidMount 中使用 {useState}答案

【问题标题】：How can i use {useState} inside ComponentDidMount in ReactJS我如何在 ReactJS 的 ComponentDidMount 中使用 {useState}
【发布时间】：2021-07-31 07:16:08
【问题描述】：

const [bgColor, setBgColor] = useState('black');
class Accelerons extends Component {
constructor(props) {
super(props);
}
componentDidMount = () => {
$(window).on('scroll touchmove', function () {
  if ($(document).scrollTop() >= $('.about-us').position().top) {
    setBgColor('red');
  }
  
 });
 };
render() {
return (
  <article
    style={{
      backgroundColor: bgColor,
    }}
  >
    <Overlay />
    <Landing landing={DataAccelerons.landing} />
    <AboutUs itemColor={itemColor} accelerons={DataAccelerons} />
    <Participation itemColor={itemColor} accelerons={DataAccelerons} />
    <TeamMembers itemColor={itemColor} accelerons={DataAccelerons} />
    <Results itemColor={itemColor} accelerons={DataAccelerons} />
    <Footer
      accentColor={DataAccelerons.accentColor}
      footerColors={DataAccelerons.footerColors}
    />
  </article>
);
}
}
export default Accelerons;

这给了我一个错误，我们不能在开始时使用反应钩子，但是如果我在渲染中声明它们，它将不会被 ComponentDidMount 函数 ReactJS 识别

【问题讨论】：

只能在函数组件内部使用钩子，在类组件中需要使用this.setStatereactjs.org/docs/react-component.html#setstate

标签： javascript jquery reactjs web

【解决方案1】：

您可以仅在功能组件内部使用 useState 等钩子，而在类组件的生命周期中使用 setState。你不想混合两个。一个典型的用法是这样的：

import React, { useState } from 'react';

function Example() {
  const [myVal, setMyVal] = useState('Hello World');

  return (
    <div>
      <p>{myVal}</p>
    </div>
  );
}

如果你想使用生命周期方法（例如componentDidMount），你可以考虑使用seState。此外，您不能在 render 方法中使用 setState，因为它会触发无限调用。

【讨论】：

【解决方案2】：

React hook 只能用于功能组件，而componentDidMount 是基于类的组件的生命周期方法。

【讨论】：