Компонент не отображается - Реагирует

ProgramBox

Компонент не отображается — Реагирует

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

Похоже, у меня проблема с моим компонентом пользовательского интерфейса Material. Я просто не могу заставить его отображаться, несмотря на несколько перечитываний (плюс проверки других проектов, где у меня точно то же самое).

Благодаря консоли.журнал Я знаю, что просматриваю свой компонент, я также знаю, что мой result.map(индекс, i) работает, потому что я также могу отображать в своей консоли информацию об этом индексе.

Возможно, это оплошность, но я действительно не вижу, где именно. И все же у меня нет ошибок, даже в консоли

Вот полный код моей страницы :

 const index = () => {

    // TimeLine
    const [result, setResult] = useState([]);

    useEffect(()=>{
        axios.get('/api/timeLine_siinfra').then((response) => {
          setResult(response.data)        
        });
    }, []);

    const classes = useStyles();

    const TimeLineAffichage = result.map((index, i) => {
        let isEven = i % 2 === 0,
        titleComponent = (
                <Grid item>
                    <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="h6" component="h1">
                        {index.sif_titre}
                    </Typography>
                    <Typography style={{ fontFamily: 'Poppins', fontSize: 'smaller', fontWeight: 200 }} className="font-face-poppins">
                        {index.sif_msg}
                    </Typography>
                </Grid>
        );

        <TimelineItem className={classes.timelineStyle}>
            <TimelineOppositeContent>
                <Typography style={{ fontFamily: 'Poppins', fontWeight: 300 }} variant="body2" color="textSecondary">
                    {index.sif_date}
                </Typography>
            </TimelineOppositeContent>
            <TimelineSeparator>
                <TimelineDot className={classes.dot}>
                    <LaptopMacIcon />
                </TimelineDot>
                <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent>
                <Paper elevation={3} className={classes.paper}>
                    <Grid container style={{ display: 'flex', flexWrap: 'nowrap' }}>
                        {isEven amp;amp; titleComponent}
                        <Grid container alignItems="center">
                            {isEven
                                ?
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginLeft: '10px' }} />
                                </Zoom>
                                :
                                <Zoom overlayBgColorStart='rgba(73, 80, 87, 67)' overlayBgColorEnd='rgba(73, 80, 87, 67)' zoomMargin={50}>
                                    <img src={index.sif_image} alt={index.sif_image} className={classes.img} style={{ maxWidth: 200, maxHeight: 200, marginRight: '10px' }} />
                                </Zoom>}
                        </Grid>
                        {!isEven amp;amp; titleComponent}
                    </Grid>
                </Paper>
            </TimelineContent>
            {console.log("I'm HERE !!!!")}
            {console.log(index, i)}
        </TimelineItem>
    }) 

    return (
        <div>
            <Timeline align="alternate">
                {TimeLineAffichage}
            </Timeline>
        </div>
    )
}

export default index;

Спасибо за любую помощь по моей теме.
(Я искренне надеюсь, что проблема сложнее, чем забывчивость)

ПРАВКА : Достаточно было добавить return() в мой компонент. До сих пор не знаю для других проектов, почему он работал без какого-либо возврата.

1. Вы , кажется, ничего не возвращаете TimeLineAffichage , конечно result.map , есть, но что возвращается?

2. что особенно странно для меня, так это то , что компилятор должен жаловаться на то, что «вы ничего не возвращаете из этого компонента, почему он вообще существует?», Вероятно, это сэкономило бы вам несколько часов….

3. Вы пропустили return из result.map -за этого, поэтому вы не видите свой компонент

4. Я действительно не знаю, как я все еще учусь реагировать, но я думал, что моего результата.карты было достаточно, чтобы сказать «Эй, верни это». Как вы и сказали, компилятор ничего не говорит, для него все ясно

Ответ №1:

У вас нет никакого оператора return в функции, переданной в map mathod. Таким образом, он вернет undefined то, что не будет отображаться на странице. Используйте оператор return в функции.

Ответ №2:

#1 Вы ничего не возвращаете в своей TimeLineAffichage функции

#2 Вам нужно вызвать эту функцию {TimeLineAffichage()}

#3 Вы должны условно отобразить это возвращение на основе result и обработать «пустое время» между ними:

        {result amp;amp; TimeLineAffichage()}

#4 Если вы все еще не видите компонент, то вам нужно, чтобы эффект использования запускал TimeLineAffichage функцию при изменении result и обрабатывал ваш возврат по-другому.