Блог

Главная - Вопросы по программированию - Я пытаюсь использовать функцию componentdidmount

Я пытаюсь использовать функцию componentdidmount

#reactjs

Вопрос:

Я новичок в react,

Я изучаю react, в этом процессе я попытался создать for componentdidmount forreact. Если бы я застрял в следующем коде

Ниже приведен мой код

 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

Не могли бы вы помочь мне понять, что я здесь делаю не так?

Заранее спасибо

Комментарии:

1. это componentDidMount не componentdidMount так, reactjs.org/docs/react-component.html#componentdidmount

2. Вы не можете использовать componentDidMount в функциональных компонентах, вместо этого используйте useEffect .

3. Чтобы добавить к комментарию hellogoodnight, см., в частности, время появления эффектов . Компоненты функции React используют перехваты React (с зависимостями) для обработки жизненного цикла компонента.

Ответ №1:

прежде всего, это «componentDidMount»

И в функциональных компонентах мы используем «useEffect» для перехватов жизненного цикла, а «componentDidMount» — для компонентов класса

Метки: