Не работает map на полученных данных с сервера, как исправить?

Question

[Дмитрий Самойлов]

Здравствуйте, не могу разобраться с проблемой, функция map не работает с данными, которые получаю с сервера. Я пишу на React, использую для получения данных axios и заворачиваю в useEffect, чтобы данные подгружались во время рендера компонента. По идеи данные грузятся нормально, получалось вывести, значит не в map проблема
Но после перезагрузки выдает ошибку Это, наверное, потому что данные не успевают загрузиться с сервера, чтобы начать перебор, но я не понимаю почему.. Вроде useEffect и async await должны решать эту проблему, код же должен дождаться этих данных, а потом уже работать с ними, так в чем же проблема? Я не понимаю как это исправить, в другом компоненте у меня такой же код, но там все работает хорошо, вот код

const [fullPost, setFullPost] = useState([]);
  const { id } = useParams();

  useEffect(() => {
    const fetchFullPost = async () => {
      const res = await axios.get('/posts/' + id);
      setFullPost(res.data);
    };
    fetchFullPost();
  }, [id]);

  const cat = fullPost.categories.map((e) => e.name);
  const body = fullPost.body.map((e) => e.blocks)[0];

Answer 1

[Дмитрий Самойлов]

Я решил это условным рендерингом, вроде бы работает

{fullPost.length === 0 ? (
        'Загружается'
      ) : (
        <FullPostContent fullPost={fullPost} />
      )}

Comments

[deantek]

const cat = fullPost && fullPost.length ? fullPost.categories.map((e) => e.name) : [];

а так?

[Дмитрий Самойлов]

deantek, возможно это будет работать, но у меня много действий с массивом, который получаю, поэтому решил вынести код в отдельный компонент FullPostContent и делаю его рендер, когда получаю все данные. Ошибка возникала при любой работе с этими данными

[Алексей Уколов]

У вас какая-то путаница с типами данных. fullPost - это объект, судя по тому, как вы его используете. Вы же пытаетесь здесь работать с ним как с массивом, обращаясь к length и при этом оно как-то работает...

[Дмитрий Самойлов]

Алексей Уколов, Нет, fullPost у меня массив, просто до загрузки данных он принимал значение undefined

[Алексей Уколов]

С массивами так не работают: fullPost.categories.

Answer 2

[Алексей Уколов]

useState({categories: [], body: []});

Comments

[Дмитрий Самойлов]

Не получается, я еще с помощью slice режу body, чтобы достать оттуда нужный текст. Выдает ошибку на slice, я так понял он на все методы работы с данными будет выдавать ошибку

<div className='fullpost-content'>
          {body.slice(0, 1).map((e) => (
            <h1>{e.data.text}</h1>
          ))}
          {body.slice(1).map((e) => (
            <p>{e.data.text}</p>
          ))}
        </div>