React map () - Uncaught TypeError: Невозможно прочитать категории свойств undefined

Question

Переменная appStructure будет отображаться, как показано на рисунке ниже.

Когда я console.log (категория),
Он показывает - Uncaught TypeError: невозможно прочитать «категории» свойств неопределенного
Я не уверен, что причина в том, что значение appStructure равно [] при первом запуске useEffect.

const [structure, setstructure] = useState([]);
const [previewOption, setpreviewOption] = useState([])

useEffect(() =>{

    if(structure){
        structure.structure.categories.map(category =>{
            console.log(category)
        })
   }
},[structure])

Answer 1

Ваш appStructure выглядит как объект, но вы инициализируете состояние как пустой массив. Попробуйте вместо этого установить его на null:

const [appStructure, setAppStructure] = useState(null);

В зависимости от того, что ваша система вернет или может вернуть, вы можете добавить больше проверок в оператор if, чтобы убедиться, что все объекты присутствуют перед запуском map() :

if(appStructure && appStructure.structure && appStructure.structure.categories) {
  // Run map()
}

Answer 2

useEffect запускается, когда компонент монтируется и когда любое из значений в его массиве зависимостей изменяется. Поэтому, когда компонент монтируется, значение appStructure является пустым массивом, так как он объявлен как const [appStructure, setAppStructure] = useState([]);. Поскольку он не равен null или undefined, он передает if в вашем хуке и, следовательно, не найдет свойство structure, вызывающее ошибку, с которой вы столкнулись.

Вы можете решить эту проблему, изменив свое предложение if на:

if(appStructure.structure)

Предполагается, что внутри этого объекта всегда будет categories.