时间戳

首页 > 解决方案 > 组件在收到道具时冻结页面

reactjs - 组件在收到道具时冻结页面

问题描述

我正在使用 MERN 制作一个完整的堆栈应用程序。我想通过将类别id从页面传递到组件的特定id来获取我的所有添加。当我尝试使用 id 加载页面时，浏览器卡住并显示一条消息：继续等待或停止站点。

这是页面：

import React from 'react'; import {useParams} from 'react-router-dom';

const VerAnuncios = () => {

    const {id} = useParams();
    return (
        <div>
            <VerAnuncios busqueda={id}/>
        </div>
    ) }

export default VerAnuncios;

这是组件：

import React, { useEffect, useState } from 'react';
import Anuncio from './Anuncio';
import '../Styles/Anuncios.css';

/* Componente para renderizar todos los anuncios de una categoría */
/ * Component to render all the ads of a category * /

const VerAnuncios = ({busqueda}) => {
    const [anuncios, setAnucios] = useState([]);

    useEffect(() => {
        getAnuncios();
    }, []);

    const getAnuncios = () => {
        const response = await fetch(`http://localhost:3010/anuncios`);
        const data = await response.json();
        setAnucios(data);
    }
    return (
        <div>
            < div className="row">
                <h1>Anuncios de la categoría</h1>
                {anuncios.filter((anuncio) => {
                    if(busqueda == ""){
                        return(<div>No se han introducido nada</div>)
                    } else if (anuncio.titulo.toLowerCase().incluides(busqueda.toLowerCase())) {
                        return anuncio
                    }
                }).map(anuncio => {
                    <Anuncio
                        titulo={anuncio.titulo}
                        precio={anuncio.precio}
                        descripcion={anuncio.descripcion}
                        proveedor={anuncio.proveedor}
                    />
                })}
            </div>
        </div>
    );
};

export default VerAnuncios;

我不知道我做的事情是否正确，所以我很想知道它是否正确，或者我可以如何改进或纠正它。

谢谢你。

标签： reactjsreact-props

解决方案

抱歉在这里发帖。由于声誉低，我现在无法发表评论。

在上面的代码中，您的 getAnuncios 函数需要异步才能在该函数内调用 await。

在 < 和 div 之间也有空格return

< div

推荐阅读