Установка состояния внутри useEffect нарушает мою структуру данных?

Question

Я пытался установить состояние в своем хуке useEffect, но он возвратил бесконечно вложенный объект вместо плоской коллекции:

  const [items, setItems] = useState([]);
  useEffect(() => {
    if (loading || error) return;
    let { items } = data;
    items = items.map(r => ({
      ...r,
      questionData: JSON.parse(r.data),
      updatedAt: format(new Date(`${r.updatedAt}.000Z`), 'yyyy-MM-dd')
    }));

    setItems(items);
  }, [loading, error, data]);

Ожидается это:

но получил это вместо:

Answer 1

 const [items, setItems] = useState([]);
  useEffect(() => {
    if (loading || error) return;
    let { items } = data;
    items = items.map(r => ({
      ...r,
      questionData: JSON.parse(r.data),
      updatedAt: format(new Date(`${r.updatedAt}.000Z`), 'yyyy-MM-dd')
    }));

    setItems(items);
  }, [loading, error, data]);

Почему вы установили состояние с названием items, а внутри своего useEffect - локальную переменную с именем items? Это вызовет проблемы.

Просто измените локальную переменную на имя, которое имеет больше смысла и не конфликтует с вашим состоянием.

let dataItems = data;
dataItems = dataItems.map(dataItem => ({...})