reactjs - 我正在尝试使用 componentdidmount 功能

Question

我是新来的反应，

我正在学习react，在这个过程中我尝试为react 创建一个for componentdidmount。我是否被困在以下代码中

下面是我的代码

import React from "react";
import {Card, Button, Container, Row, Col} from 'react-bootstrap';
import addquantity from '../Functions/quantityadd.js';

  const numberOfCards = 100;
  const Home = (props) => {

    componentdidMount(){
        console.log('First this called');
      }

    return (
      <div>
        <h2>Home</h2>
        <Container>
            <Row xs={3} md={4} lg={6}>
            {[...Array(numberOfCards)].map((e, i) => {
                return (
                  <Col className='mt-5' key={i+1}> 
                      <Card >
                          {/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
                          <Card.Body>
                              <Card.Title tag="h5">Test</Card.Title>
                              <Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
                              <Card.Text>Some quick example text to build on the card title and make up the bulk of the
                                  card's
                                  content.</Card.Text>
                              <Button onClick={() =>addquantity(i+1)}>Button</Button>
                          </Card.Body>
                      </Card>
                  </Col>
                )
            })}
            </Row>
        </Container>

      </div>
    );
  }
  export default Home;

我需要加载产品列表的数据。所以我正在使用componentdidmount

你能帮我理解我在这里做错了什么吗？

提前致谢

标签： reactjs

Answer 1

首先这是“componentDidMount”

在功能组件中，我们将“useEffect”用于生命周期挂钩，“componentDidMount”用于类组件