Сопоставить массив внутри массива

ProgramBox

Сопоставить массив внутри массива

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

#javascript #arrays #reactjs #google-cloud-firestore #mapping

#javascript #массивы #reactjs #google-облако-firestore #сопоставление

Вопрос:

Я пытаюсь сопоставить массив внутри массива, который я извлекаю из firestore при инициализации приложения. Есть идеи, что я понимаю неправильно? Я пытаюсь сопоставить внутренний массив внутри основного массива (подмассив, который я пытаюсь сопоставить, — это массив / объект «проекты» снизу).

Скриншот массива, который я получаю из Firestore, можно найти здесь:

Я опубликую свой код здесь:

 <Container width="1080px">
      {response.map((array) => (
        <Container justifyContent="flex-start">
          <Organization>
            <Avatar src={avatar} />
            {array.organization}
          </Organization>

          {response.id.projects.map((project) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>2020 amp;nbsp;•amp;nbsp; </ProjectYear>
                My Project Name
              </ProjectName>
            </Project>
          ))}
          ;
        </Container>
      ))}
      ;
    </Container>

Вот как я извлекаю свои данные:

 useEffect(() => {
firebase.db.collection('folders').onSnapshot((snapshot) => {
  const json = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  setResponse(json);
  console.log(json);
});

}, []);

1. Чао, я отвечал более или менее как другие ребята, но теперь я вижу, что вы прокомментировали «не удается прочитать карту свойств undefined». Не могли бы вы добавить свой массив ответов как текст, а не как изображение?

Ответ №1:

Ошибка, на которую вы ссылаетесь, вероятно, вызвана вашей попыткой отобразить пустой массив (без вложенных массивов) при первоначальном отображении.

Попробуйте не устанавливать начальное значение response (т.Е. const [response, setResponse] = useState() ) и дополните JSX проверкой, response уже поступили ли ваши данные до рендеринга.

И, конечно, вам нужно использовать .map() правильно:

 return !!response.length amp;amp; (<Container width="1080px">
      {response.map(({organization, projects, id}) => (
        <Container justifyContent="flex-start" key={id}>
          <Organization>
            <Avatar src={avatar} />
            {organization}
          </Organization>
          {!!projects.length amp;amp; projects.map(({project_year, project_name}) => (
            <Project>
              <Thumbnail />
              <ProjectName>
                <ProjectYear>{project_year} amp;nbsp;•amp;nbsp; </ProjectYear>
                {project_name}
              </ProjectName>
            </Project>
          ))}
        </Container>
      ))}
</Container>
)

1. Ошибка типа: не удается прочитать свойство ‘map’ из undefined… Это ошибка, которую я продолжаю получать после каждого решения, упомянутого в этой теме

2. @AdamSchwarcz : эта ошибка вызвана внутренним или внешним отображением? В последнем случае есть вероятность, что вы попытаетесь отобразить свои данные до их фактического поступления. Не могли бы вы показать более широкий пример кода, чтобы увидеть ту часть, где вы получаете данные из firestore?

3. Привет, я добавил эффект useEffect в свой основной вопрос

4. Я думаю, что проблема во внутренней карте

5. const [ответ, setResponse] = useState([]);

Ответ №2:

Чао, ты мог бы попробовать что-то вроде:

 {response amp;amp; <Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 amp;nbsp;•amp;nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container> }

response amp;amp; используется, чтобы избежать визуализации данных перед получением их из firebase. array.projects потому что я видел на вашей картинке, которой projects нет в id .

Редактировать

Я привел небольшой пример, чтобы показать, что map работает:

 let response = [{id: 1, organization: "org1", projects: [{project_year: "2020", project_name: "prj11"}, {project_year: "2020", project_name: "prj12"}]}, {id: 2, organization: "org2", projects: [{project_year: "2021", project_name: "prj21"}, {project_year: "2021", project_name: "prj21"}]}];

response.map((array) => {
   array.projects.map((project) => {
      console.log(project.project_year, project.project_name);
   })
})

Я не знаю, кажется, что проблема в другом.

1. По-прежнему возникает та же проблема: TypeError: не удается прочитать свойство ‘map’ из undefined

2. @AdamSchwarcz Я дополняю свой ответ небольшим примером, чтобы показать, что функция отображения, которую я записываю таким образом, работает. Возможно, проблема в другом.

3. Я понимаю.. К сожалению, это не помогает: (Все еще получаем отображение неопределенного

Ответ №3:

Вы можете сопоставить переменную «array».

 <Container width="1080px">
  {response.map((array) => (
    <Container justifyContent="flex-start">
      <Organization>
        <Avatar src={avatar} />
        {array.organization}
      </Organization>

      {array.projects.map((project) => (
        <Project>
          <Thumbnail />
          <ProjectName>
            <ProjectYear>2020 amp;nbsp;•amp;nbsp; </ProjectYear>
            My Project Name
          </ProjectName>
        </Project>
      ))}
      ;
    </Container>
  ))}
  ;
</Container>