Компонент, возвращающий вложенные элементы React, не отображается

У меня есть компонент по умолчанию Коллекция, который использует подкомпонент с именем РендерКоллекцияПьесес для отображения элементов пользовательского интерфейса. Я не могу понять, почему я могу видеть данные для image.name в консоли, кроме не может видеть отображение элементов пользовательского интерфейса.

Дополнительная информация:

  • В консоли ошибок нет
  • Если я заменю <p>{image.name}</p> на <p>TESTING</p>, все равно ничего не появится.
  • columnOrg — это список списков
  • каждый список в columnOrg представляет собой список карт с некоторыми атрибутами

Индекс.js:

const RenderCollectionPieces = () => {
  const {collectionId} = useParams();  
  let listOfImageObjects = collectionMap[collectionId];
  let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
  let columnOrg = [];

  while (columnOrg.length < 4){
    if (imagesPerColumn > listOfImageObjects.length){
      imagesPerColumn = listOfImageObjects.length;
    }
    columnOrg.push(listOfImageObjects.splice(0,imagesPerColumn))
  }
 
  let collectionList = columnOrg.map((col) => {
        return(            
            <Grid item sm = {3}>
              {
                col.map((image) => {
                  console.info(image.name)
                  return(
                    <p>{image.name}</p>
                  )
                })
              }
            </Grid>
        )
    });
  return collectionList;
};

const Collection = ({ match }) => {
  const {collectionId} = useParams();
  return(
    <Box sx = {{ background:'white'}}>
      <Grid container>           
        <RenderCollectionPieces />          
      </Grid>
  </Box>
  )
};

export default Collection;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
39
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, вы неправильно понимаете управление состоянием в React. Каждая переменная, которую вы хотите запомнить между повторными рендерингами компонентов, должна быть включена в состояние с помощью хука useState. Если вы хотите изначально выполнить что-то вроде цикла while, используйте его внутри хука useEffect.

const MyComponent = () => {
  const [myCounter, setMyCounter] = useState(0);

  useEffect(() => {
    console.info("This will be performed at the start");
  }, []);

  return (
    <Fragment>
      <button onClick = {() => setMyCounter(myCounter++)} />
      You clicked {myCounter} times
    </Fragment>
  )
}

Если вы не знакомы с хуками useState и useEffect, я рекомендую сначала узнать о них, чтобы понять, как React управляет состоянием и выполняет повторный рендеринг: https://reactjs.org/docs/hooks-intro.html

Эти хуки действительно нужны? Все, что я хочу, чтобы компонент делал, это перебирал пару списков и возвращал элементы в содержимом элементов пользовательского интерфейса. Похоже, хуки были бы более полезны, если вы ожидаете, что пользователь будет взаимодействовать с пользовательским интерфейсом. Я просто хочу загрузить элементы и их относительные атрибуты на экране.

B537B7725DC58715F6E6BFA7AFC20C 05.04.2022 04:14

Можете ли вы ответить ответом, который работает с использованием useEffect?

B537B7725DC58715F6E6BFA7AFC20C 05.04.2022 13:14
Ответ принят как подходящий

Получил работу, используя useEffect/useState в соответствии с рекомендациями Самуэль Олексак.

    const RenderCollectionPieces = (props) => {
    const [columnOrg, setColumnOrg] = useState([]);
    useEffect(() => {
    let columnSetup = []
    let listOfImageObjects = collectionMap[props.collectionId.collectionId];
    let imagesPerColumn = Math.ceil(listOfImageObjects.length / 4);
    
    while (columnSetup.length < 4){
      if (imagesPerColumn > listOfImageObjects.length){
        imagesPerColumn = listOfImageObjects.length;
      }
      columnSetup.push(listOfImageObjects.splice(0,imagesPerColumn))
    }
    setColumnOrg(columnSetup);
  },[]);
  
  return (
      columnOrg.map((column) => {
        return (
          <Grid item sm = {3}>
            {
              column.map((image) => {
                return (<img src = {image.src} alt = {image.name}/>)
              })
            }
          </Grid>
        )
      })
  )
};

Другие вопросы по теме

Похожие вопросы