Почему свойство «title» не существует для типа «Faq []»?

Question

[Elena]

Подскажите, не понятно почему в моем типе Faq[] не существует свойств title и content. Я же их прописала в типе Faq[]
export const FaqCards = () => {
const { id } = useParams();
console.log(id)
const [currentFaqs, setCurrentFaqs] = useState();
const classes = useStyles();
useEffect(() => {
(async () => {
try {
const faqsId = await HttpService.get(`/faqs/${id}`);
setCurrentFaqs(faqsId);
} catch (error) {}
})();
},[id]);

if(currentFaqs === null) return null;
else {
return (






{faqs.title}
{faqs.content}






);
};
};

Comments

[WbICHA]

Превосходное оформление кода. Благодарю, что ты думаешь о тех, у кого просишь помощи.

[Евгений Щербаков]

А где здесь вообще Faq[] используется? И где переменная faqs, из которой Вы планируете взять title и content?

И да, можно форматирование кода сделать, всё-таки тут для этого есть возможности.

[Elena]

Евгений Щербаков, Sory.

Вот главная страница карточек. И по ссылке на карточку должна появляться на всю страницу эта же карточка

MockService.onGet("/faq").reply(() => {
return [200, faqs];
});

export const FAQ = () => {
const classes = useStyles();
const [{ device }] = useAppStore();
const switchDeviceSize = device.isMobile ? 12 : 4;
const [currentFaqs, setCurrentFaqs] = useState([]);

useEffect(() => {
(async () => {
try {
const faqs = await HttpService.get("/faq");
setCurrentFaqs(faqs);
console.log(faqs);
} catch (error) {}
})();
}, []);

return (








Какую информацию вы хотите найти?



type="text"
placeholder="Найдите всё, что требуется(онлайн-консультация,
добавление записи в медкарту...)"
fullWidth
classes={{
inputWrapper: classes.searchField,
}}
startAdornment={
position="start"
classes={{ root: classes.searchImg }}
>


}
/>





{currentFaqs.map((card) => {
return (




{card.title}
{card.content}




);
})}




);
};

А эта страница на которую перехожу по ссылке

type Params = {
id: string;
}

MockService.onGet(/faq\/\d+$/).reply(() => {
return [200, faqs[0]]
});

export const FaqCards = () => {
const { id } = useParams();
console.log(id)
const [currentFaqs, setCurrentFaqs] = useState();
const classes = useStyles();

useEffect(() => {
(async () => {
try {
const faqsId = await HttpService.get(`/faqs/${id}`);
setCurrentFaqs(faqsId);
} catch (error) {}
})();
},[id]);

if(currentFaqs === null) return null;
else {
return (






{faqs.title}
{faqs.content}






);
};
};

[Elena]

странно как то код отправляется

[Elena]

переменная faqs

export const faqs: Faq[] = [
{
id: "1",
title: "Регистрация в личном кабинете",
content: "Узнайте, как зарегистрироваться в личном кабинете и активировать его",
},
{
id: "2",
title: "Настройки",
content: "Регулируйте настройки личного кабинета под свои потребности.Проверяйте устройства перед консультациями",
},
{
id: "3",
title: "Здоровье",
content: "Узнайте, как воспользоватся быстрым поиском врача,заказать телемедицинскую консультацию или просмотреть новости вашей клиники",
},
{
id: "4",
title: "Медицинская карта",
content: "Узнайте, как настроить выгрузку данных из клиники и добавлять данные самостоятельно",
},

[Евгений Щербаков]

А Вы используете для кода теги, чтобы он отображался правильно и корректно?

У Вас для этого есть кнопка < / > над текстовым полем, в котором Вы пишите.

[Евгений Щербаков]

И либо я слепой, либо Вы не написали само определение для интерфейса Faq

[Elena]

MockService.onGet("/faq").reply(() => {
  return [200, faqs];
});

export const FAQ = () => {
  const classes = useStyles();
  const [{ device }] = useAppStore();
  const switchDeviceSize = device.isMobile ? 12 : 4;
  const [currentFaqs, setCurrentFaqs] = useState<Faq[]>([]);

  useEffect(() => {
    (async () => {
      try {
        const faqs = await HttpService.get<Faq[]>("/faq");
        setCurrentFaqs(faqs);
        console.log(faqs);
      } catch (error) {}
    })();
  }, []);

  return (
    <div>
      <div className={classes.root}>
        <GridContainer>
          <GridRow>
            <GridColumn>
              <header className={classes.headerSearch}>
                <GridColumn>
                  <div className={classes.mainHeading}>
                    Какую информацию вы хотите найти?
                  </div>
                </GridColumn>
                <GridColumn size={10} offset={1}>
                  <Input
                    type="text"
                    placeholder="Найдите всё, что требуется(онлайн-консультация,
                    добавление записи в медкарту...)"
                    fullWidth
                    classes={{
                      inputWrapper: classes.searchField,
                    }}
                    startAdornment={
                      <InputAdornment
                        position="start"
                        classes={{ root: classes.searchImg }}
                      >
                        <Search></Search>
                      </InputAdornment>
                    }
                  />
                </GridColumn>
              </header>
            </GridColumn>
          </GridRow>
          <GridRow>
            {currentFaqs.map((card) => {
              return (
                <GridColumn size={switchDeviceSize}>
                  <Link to={`/faq/${card.id}`}>
                    <div className={classes.blockCard} key={card.id}>
                      <div className={classes.boxTitle}>
                        <p className={classes.titleSection}>{card.title}</p>
                        <p className={classes.textSection}>{card.content}</p>
                      </div>
                    </div>
                  </Link>
                </GridColumn>
              );
            })}
          </GridRow>
        </GridContainer>
      </div>
    </div>
  );
};

[Elena]

type Params = {
  id: string;
}

MockService.onGet(/faq\/\d+$/).reply(() => {
  return [200, faqs[0]]
});

export const FaqCards = () => {
  const  { id }  = useParams<Params>();
  console.log(id)
  const [currentFaqs, setCurrentFaqs] = useState<Faq[] | null>();
  const classes = useStyles();

  useEffect(() => {
    (async () => {
      try {
        const faqsId = await HttpService.get<Faq[]>(`/faqs/${id}`);
        setCurrentFaqs(faqsId);
      } catch (error) {}
    })();
  },[id]);

  if(currentFaqs === null) return null;
  else {
    return (
      <div className={classes.root}>
        <GridContainer>
          <GridRow>
            <GridColumn>
              <div className={classes.cards}key={id}>
                <div className={classes.blockTitle}>
                  <p className={classes.title}>{faqs.title}</p>
                  <p className={classes.content}>{faqs.content}</p>
                </div>
              </div>
            </GridColumn>
          </GridRow>
        </GridContainer>
      </div>
    );
  };  
};

[Elena]

Евгений Щербаков, спасибо за помощь

[Elena]

Евгений Щербаков,

export type Faq = {
  id: string;
  title: string;
  content: string;
};

[Евгений Щербаков]

Elena, вопрос решен? Или у Вас до сих пор ошибка?

[Elena]

Евгений Щербаков, ошибка

[Евгений Щербаков]

У Вас в рамках компонента FaqCards нет переменной faqs.
Скорее всего Вам нужно использовать currentFaqs.

[Elena]

Евгений Щербаков, нет. не помогло. undefined теперь

[Евгений Щербаков]

Что undefined? Какая переменная undefined?
Если currentFaqs, то значит ошибка здесь

const faqsId = await HttpService.get<Faq[]>(`/faqs/${id}`);
setCurrentFaqs(faqsId);

[Евгений Щербаков]

Давайте переберемся в ответ. Я сейчас сделаю ответ, чтобы можно было потом его выбрать, как решение. А то реально много всего делаем.

[Евгений Щербаков]

Оставляйте комментарии в ответе.

Answer 1

[Евгений Щербаков]

Как я понял, было несколько проблем, судя по предоставленному коду.
1. Не было типа/интерфейса для Faq
2. Использовалась неправильная переменная faqs, вместо неё нужно было брать currentFaqs

Comments

[Elena]

Нет. Тип прописан был сразу, а с currentFaqs тоже ошибка такая же: свойство title не существует в типе Faq[].

[Elena]

Ошибка в title и content, они не существуют в типе Faq[]

[Евгений Щербаков]

Потому что у Вас должно быть просто Faq, а не Faq[]
Вы же получаете только один вопрос, а не массив, как я понимаю.

[Elena]

Евгений Щербаков, Если Faq то он не видит переменную faqs теперь.

export const faqs: Faq = [
{
id: "1",
title: "Регистрация в личном кабинете",
content: "Узнайте, как зарегистрироваться в личном кабинете и активировать его",
},
{
id: "2",
title: "Настройки",
content: "Регулируйте настройки личного кабинета под свои потребности.Проверяйте устройства перед консультациями",
},

[Евгений Щербаков]

Еще раз, Вам нужно использовать просто Faq вместо Faq[] (потому что Вы получаете ОДИН faq по id, а не все сразу) и смотреть на переменную currentFaqs.
Если в ней у Вас приходит undefined, то значит код

const faqsId = await HttpService.get<Faq[]>(`/faqs/${id}`);
setCurrentFaqs(faqsId);

отрабатывает у Вас неправильно

[Евгений Щербаков]

MockService.onGet(/faq\/\d+$/).reply(() => {
  return [200, faqs[0]]
});

Вот здесь видно, что Вы получаете ОДИН faq, поэтому и нужно использовать просто Faq

[Евгений Щербаков]

Я говорю сейчас вот про этот кусок кода

MockService.onGet(/faq\/\d+$/).reply(() => {
  return [200, faqs[0]]
});

export const FaqCards = () => {
  const  { id }  = useParams<Params>();
  console.log(id)
  const [currentFaqs, setCurrentFaqs] = useState<Faq[] | null>();
  const classes = useStyles();

  useEffect(() => {
    (async () => {
      try {
        const faqsId = await HttpService.get<Faq[]>(`/faqs/${id}`);
        setCurrentFaqs(faqsId);
      } catch (error) {}
    })();
  },[id]);

  if(currentFaqs === null) return null;
  else {
    return (
      <div className={classes.root}>
        <GridContainer>
          <GridRow>
            <GridColumn>
              <div className={classes.cards}key={id}>
                <div className={classes.blockTitle}>
                  <p className={classes.title}>{faqs.title}</p>
                  <p className={classes.content}>{faqs.content}</p>
                </div>
              </div>
            </GridColumn>
          </GridRow>
        </GridContainer>
      </div>
    );
  };  
};

[Elena]

Евгений Щербаков, извините, но я начинающая в этом деле и не совсем пойму как и где мне просто Faq использовать?

[Евгений Щербаков]

В сообщении выше я написал, в каком куске кода нужно поменять Faq[] на просто Faq

[Elena]

Евгений Щербаков, спасибо) все заработало. только странно он возвращает один и тот же текст

MockService.onGet(/faqs\/\d+$/).reply(() => {
  return [200, faqs[0]]
});

и вот в этом месте подсвечивается зеленым цветом:

(/faqs\/\d+$/)

[Евгений Щербаков]

Elena, если мое решение Вам помогло, то отметьте пожалуйста ответ, как решение. Спасибо!

Возвращает один и тот же текст, потому что у Вас явно написано, что Вы всегда берете первый элемент faqs[0]

То, что подчеркивается зеленым, не важно

P.s.
Как же Вас занесло в React, если Вы не понимаете, что сами берете только первый элемент? Извините, что-то рановато Вы в React пошли :(

[Elena]

Евгений Щербаков, я понимаю что это первый элемент. Нет не рано. в самый раз

[Евгений Щербаков]

Если понимаете, то тогда мне не понятен Ваш вопрос про

только странно он возвращает один и тот же текст

[Евгений Щербаков]

Elena, По поводу Вашего НОВОГО вопроса.

Вам нужно понимать какой id Вы отдали здесь `/faqs/${id}` и на основе этого получать нужный.

Думаю стоит уже решить этот вопрос, а с остальными разбираться отдельно. Иначе количество комментариев уже зашкаливает и это очень неудобно.

[Евгений Щербаков]

Elena, прошу прощения за свою настойчивость, но не могли бы Вы за мою помощь, выбрать мой ответ решением на Ваш вопрос. Заранее спасибо!

Answer 2

[abberati]

Faq[] — это массив объектов типа Faq. У массива нет поля title.

Comments

[Elena]

как же нету? а это
вот title
export const faqs: Faq[] = [
{
id: "1",
title: "Регистрация в личном кабинете",
content: "Узнайте, как зарегистрироваться в личном кабинете и активировать его",
},
{
id: "2",
title: "Настройки",
content: "Регулируйте настройки личного кабинета под свои потребности.Проверяйте устройства перед консультациями",
},

[Антон Иванов]

Ещё раз. У вас title есть у ЭЛЕМЕНТА массива, а не у самого массива.