Блог

Главная - Вопросы по программированию - печать массива с использованием возврата карты не определено

печать массива с использованием возврата карты не определено

#javascript #json #reactjs #react-native

Вопрос:

у меня есть массив, подобный этому

 const HeaderData = [
  {
    header: {
      title: "How you`ll benefit",
      detail:
        "We create this goals to help you recover from your recent surgery. Slowly increase your physical strength is an important part of recovery. With this plan, you will be back to normal in no time. You got this!",
    },
  },
  {
    mainData: {
      title: {
        CreatedOn: "Created on",
        CreatedBy: "Created by",
        Started: "Started",
        Completed: "Completed",
      },
      detail: {
        CreatedOn: "4/1/2021",
        CreatedBy: "Jennifer O",
        Started: "4/1/2021",
        Completed: "In progress",
      },
    },
  },
]

Теперь я хочу распечатать title данные mainData , я использую это

 export const GoalDetail = observer(function GoalDetail() {
  const SCREEN_MARGIN: ViewStyle = {
    margin: 15,
  }
  return (
    <Screen preset="scroll" style={SCREEN_MARGIN}>
      <View>
        <Text preset="h3">{HeaderData[0].header.title}</Text>
        <Text preset="h4">{HeaderData[0].header.detail}</Text>
      </View>
      <View row>
        <View>
          {HeaderData.map((item, key) => (
            <Text key={key}>{item.mainData.title}</Text>
          ))}
        </View>
      </View>
    </Screen>
  )
})

Но эмулятор, покажи мне это
Пожалуйста, помогите, что не так с моим кодом?? Большое вам спасибо

введите описание изображения здесь

Комментарии:

1. Совершенно ясно, что mainData этого не существует HeaderData[0] . Эта структура не имеет большого смысла-в первую очередь было бы неплохо узнать, почему вы ее используете. Может быть, ты хочешь HeaderData.slice(1).map ?

2. Нет, эта часть рабочего файла, у меня проблема в массиве

3. ibb.co/qRzhSxT здесь, если я прокомментирую массив

4. Только второй элемент вашего массива headerData имеет mainData свойство, поэтому он будет ошибаться в первом элементе, так как у него его нет mainData . Используется filter() для фильтрации элементов, не обладающих этим свойством, перед их сопоставлением

5. @ggorlen я попробую прямо сейчас и доложу вам, пожалуйста, помогите, я довольно новичок

Ответ №1:

Не нужно использовать filter , только map их:

 HeaderData.map((item, key) => {
   if (item?.mainData?.title)
      return renderTitle(item.mainData.title, key)
   else
      return null; // This mean show nothing, the same with return ""
})

Где-то внутри компонента объявлена функция:

 const renderTitle = (title, idx) => {
   // title is object
   let result = [];
   for (const key in title)
      result.push(<Text key={idx}>{title.key}</Text>)
   return resu<
}

Комментарии:

1.Спасибо за ваш ответ, но я получил эту ошибку как ответ @jsonmxz, он возвращает объект, подобный createOn cretaeby , но не возвращает эти значения, как я могу вернуть значение?

2. Вам нужна другая функция для их визуализации, обновил мой ответ.

3. Извините за позднее обновление, но я думаю, что буду использовать трандиционный способ

Ответ №2:

 (HeaderData.filter(elm => elm.mainData)).map( (item,key) => (
    console.log(item.mainData.title)
));

В принципе, только один из элементов вашего массива имеет ключ mainData, то есть первый будет неопределенным, поскольку он этого не делает, просто отфильтруйте все элементы в массиве, у которых есть ключ: mainData, а затем сопоставьте его..

Решение выше

  • Он работает с console.log, поэтому вы можете легко заменить его логикой react.

Попробуй:

 <View>
{(HeaderData.filter(elm => elm.mainData)).map( (item,key) => (
  <Text key={key}>{item.mainData.title}</Text>
))}
</View>

Комментарии:

1. Спасибо за ваш ответ, но, может быть, в нем чего-то не хватает ? у меня есть такая ошибка ibb.co/HVM0tWv

2. @Horst итак, как я могу пройти через это, пожалуйста, помогите

3. вы можете использовать Object.keys(item.mainData.title) для получения ключей в виде массива. или зациклите его с for...in помощью оператора, подобного приведенному ниже.

Метки: