Javascript 如何使用一种onLoad或componentDidMount函数？

我正在使用AntDesign，希望使用onLoad或componentDidMount函数。两者都不起作用

我如何制作具有相同用途的函数

//我尝试过但对我无效的事情。（我可能做错了事情。）

我想做的是在组件出现在屏幕上时触发一个函数。功能应该是在一系列对象中查找产品

编辑： 注释中要求的完整组件

import * as React from "react";
import {Row, Col, Image, Card, Space, Breadcrumb, Descriptions, InputNumber, Button} from 'antd';

import * as FreddieGras from "../images/freddieGras.jpg";
import "react-multi-carousel/lib/styles.css";
import {RouterProps} from "./router.props";
import {Link} from "@reach/router"

interface ProductDetailProps extends RouterProps {
    id?: string;
}


export default function ProductDetail(props: ProductDetailProps) {
    // Different kinds of grass
    let grassKinds = [
        {
            name: 'Kate',
            id: 1,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Fred',
            id: 2,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: false,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Gideon',
            id: 3,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Isa',
            id: 4,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
    ];

    let product = {};
    window.onload = () => {
        product = grassKinds.find(x => x.id);
        console.log('Toeter!');
    }

    return (
        <div onLoad={() => {
            console.log('Toeter!')
        }}>


            <Breadcrumb>
                <Breadcrumb.Item>
                    <Link to="/">Home</Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>

                </Breadcrumb.Item>
            </Breadcrumb>

            <Row>
                <Col span={10} justify={'space-around'} align={'center'}>
                    <Image
                        src={FreddieGras}
                    />
                </Col>

                <Col span={14}>
                    <Descriptions title="User Info" style={{width: '50%'}}>
                        <Descriptions.Item label="Naam">Kate</Descriptions.Item>
                        <Descriptions.Item label="Zachtheid">7/10</Descriptions.Item>
                        <Descriptions.Item label="Echtheid">6/10</Descriptions.Item>
                        <Descriptions.Item label="Prijs /m2">€17,95</Descriptions.Item>
                    </Descriptions>

                    <Card title="Bereken oppervlakte" style={{margin: '5px'}}>
                        <label>Lengte (m)</label>
                        <InputNumber
                            defaultValue={1000}
                            formatter={value => `€ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            onChange={() => {
                                console.log('Number')
                            }}
                        />

                        <div>
                            <p><b>Omtrek </b> 10 M</p>
                            <p><b>Oppervlakte </b> 2,5 M2</p>
                        </div>
                    </Card>

                    <Card title="Totaalprijs" style={{margin: '5px'}}>
                        <b>€ 17,95</b>
                        <Button onClick={() => {
                            console.log('In winkelwagen')
                        }}>In winkelwagen</Button>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

import*as React from“React”；
从“antd”导入{行、列、图像、卡、空格、面包屑、描述、输入编号、按钮}；
从“./images/FreddieGras.jpg”导入*作为FreddieGras；
导入“react multi carousel/lib/styles.css”；
从“/router.props”导入{RouterProps}；
从“@reach/router”导入{Link}
接口ProductDetailProps扩展了RouterProps{
id？：字符串；
}
导出默认函数ProductDetail（道具：ProductDetailProps）{
//不同种类的草
让我们来看一看：[
{
名字：“凯特”，
id:1，
图像名称：FreddieGras，
描述：“Lorem Ipsum dolor sit amet.”，
可用：正确，
柔软度：7，
真实性：6，
售价：17.95
},
{
姓名：“弗雷德”，
id:2，
图像名称：FreddieGras，
描述：“Lorem Ipsum dolor sit amet.”，
可用：false，
柔软度：7，
真实性：6，
售价：17.95
},
{
姓名：“吉迪恩”，
id:3，
图像名称：FreddieGras，
描述：“Lorem Ipsum dolor sit amet.”，
可用：正确，
柔软度：7，
真实性：6，
售价：17.95
},
{
名称：“Isa”，
id:4，
图像名称：FreddieGras，
描述：“Lorem Ipsum dolor sit amet.”，
可用：正确，
柔软度：7，
真实性：6，
售价：17.95
},
];
设乘积={}；
window.onload=（）=>{
product=grassKinds.find（x=>x.id）；
console.log（'Toeter！'）；
}
返回(
{
console.log（'Toeter！'）
}}>
家
凯特
7/10
6/10
€17,95
朗特（米）
`欧元${value}`。替换（/\B（？=（\d{3}）+（？！\d））/g，'，'）}
onChange={（）=>{
console.log（'Number'）
}}
/>
Omtrek 10米

Oppervlakte 2.5 M2

€ 17,95
{
console.log（'在winkelwagen'中）
}}>在温克尔瓦根
)
}

React组件不使用

窗口。onload

和

componentDidMount

仅在基于类的组件中保留并有效。功能组件可以使用带有空依赖项数组的

useffect

React钩子来获得与

componentDidMount

生命周期方法等效的方法

let product = {};

useEffect(() => {
  product = grassKinds.find(x => x.id);
  console.log('Toeter!');
}, []);

---

展示您迄今为止所做的工作请在您的问题中包括一个代码示例，并更详细地解释什么没有按预期工作，并包括任何错误消息等。我们通常不在Reactland中使用

window.onload

。而

componentDidMount

仅在基于类的组件中有效。尝试包含一个完整的组件代码示例，以便我们更好地理解您要做的事情。

componentDidMount = () => {
//Blah blah
}

import * as React from "react";
import {Row, Col, Image, Card, Space, Breadcrumb, Descriptions, InputNumber, Button} from 'antd';

import * as FreddieGras from "../images/freddieGras.jpg";
import "react-multi-carousel/lib/styles.css";
import {RouterProps} from "./router.props";
import {Link} from "@reach/router"

interface ProductDetailProps extends RouterProps {
    id?: string;
}


export default function ProductDetail(props: ProductDetailProps) {
    // Different kinds of grass
    let grassKinds = [
        {
            name: 'Kate',
            id: 1,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Fred',
            id: 2,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: false,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Gideon',
            id: 3,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
        {
            name: 'Isa',
            id: 4,
            imageName: FreddieGras,
            desc: "Lorem Ipsum dolor sit amet.",
            available: true,
            softness: 7,
            realness: 6,
            price: 17.95
        },
    ];

    let product = {};
    window.onload = () => {
        product = grassKinds.find(x => x.id);
        console.log('Toeter!');
    }

    return (
        <div onLoad={() => {
            console.log('Toeter!')
        }}>


            <Breadcrumb>
                <Breadcrumb.Item>
                    <Link to="/">Home</Link>
                </Breadcrumb.Item>
                <Breadcrumb.Item>

                </Breadcrumb.Item>
            </Breadcrumb>

            <Row>
                <Col span={10} justify={'space-around'} align={'center'}>
                    <Image
                        src={FreddieGras}
                    />
                </Col>

                <Col span={14}>
                    <Descriptions title="User Info" style={{width: '50%'}}>
                        <Descriptions.Item label="Naam">Kate</Descriptions.Item>
                        <Descriptions.Item label="Zachtheid">7/10</Descriptions.Item>
                        <Descriptions.Item label="Echtheid">6/10</Descriptions.Item>
                        <Descriptions.Item label="Prijs /m2">€17,95</Descriptions.Item>
                    </Descriptions>

                    <Card title="Bereken oppervlakte" style={{margin: '5px'}}>
                        <label>Lengte (m)</label>
                        <InputNumber
                            defaultValue={1000}
                            formatter={value => `€ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            onChange={() => {
                                console.log('Number')
                            }}
                        />

                        <div>
                            <p><b>Omtrek </b> 10 M</p>
                            <p><b>Oppervlakte </b> 2,5 M2</p>
                        </div>
                    </Card>

                    <Card title="Totaalprijs" style={{margin: '5px'}}>
                        <b>€ 17,95</b>
                        <Button onClick={() => {
                            console.log('In winkelwagen')
                        }}>In winkelwagen</Button>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

let product = {};

useEffect(() => {
  product = grassKinds.find(x => x.id);
  console.log('Toeter!');
}, []);