Блог

У меня есть функция со стрелкой, которая возвращает это:

   return (
    <div className="posts">
      <Post />
      {dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );
};
 

В моем компоненте Post я пытаюсь импортировать автора, дату и текст, переданный в реквизитах, но это говорит мне, что эти данные не определены. Однако, когда я консолю.log (публикую), появляются мои данные … вот код :

 const Post = ({post}) => {
  //const {author, date_creation, message} = post
  return (
    <div className="post">
      <div className="post__author_group">
        <Avatar className={"post__avatar"} />
        <div className="post__author_and_date">
          <Author className="post__author" author={'author'} />
          <Date className="post__date" date={'date_creation'} />
        </div>
      </div>
      <Text message={'message'} />
      {/* <Media /> */}
      <Interactions />
    </div>
  );
};
 

Если я console.log(сообщение), я могу видеть свои 5 объектов, но если я раскомментирую «//const {автор, создание даты, сообщение} = сообщение» и заменю author = {‘автор «} на author = {автор} (что является опорой), это ставит меня в положение» Ошибка типа: Невозможно уничтожить свойство»автор «»сообщения», поскольку оно не определено».

Я не знаю, связано ли это, но когда я console.log (публикую), в моей консоли до того, как у меня появятся мои объекты, у меня есть два «неопределенных», но я не знаю, откуда они взялись. Моя консоль :

 Post.js: 12 undefined
Post.js: 12 undefined
Post.js: 12 {id: 1, message: 'Hello World', date_creation: '2020-11-11T10: 11: 11.000Z', author: 'Vincent'}
Post.js: 12 {id: 2, message: 'Hello World', date_creation: '2020-11-11T10: 11: 11.000Z', author: 'Vincent'}
Post.js: 12 {id: 3, message: 'Hello World', date_creation: '2017-06-29T15: 54: 04.000Z', author: 'Vincent'}
Post.js: 12 {id: 4, message: 'Hello World', date_creation: '2021-09-03T13: 50: 33.000Z', author: 'Vincent'}
Post.js: 12 {id: 5, message: 'Hello World', date_creation: '2021-09-03T13: 50: 49.000Z', author: 'Vincent'}
 

Это связано с тем, что ваши данные не загружаются при первой загрузке вашего компонента. Попробуй это:

 const Post = ({post}) => {
if(post){
 const {author, date_creation, message} = post // You can destructure here 
 return (
    // ....
  );
}
else return null;
};
 

или

Загрузите вышеуказанный компонент, если вы получили все свои данные

  return (
    <div className="posts">
      <Post />
      {dataApi amp;amp; dataApi.length > 0 amp;amp; dataApi.map((post) => {
        return <Post post={post} key={uuidv4()} />;
      })}
    </div>
  );