Ошибка undefined не является объектом React Native

Question

У меня есть. JSON в этом формате:

{
    "main": {
        "first": {
            "id": "123",
            "name": "abc"
        },
        "second": {
            "id": "321",
            "name": "bca"
        }
    }
}

Перед вызовом API я создаю состояние следующим образом:

const [fetchApiData, setApiData] = useState({main:{}});

И я передаю свои fetchApiData через реквизиты детям как:

<Index content={fetchApiData}/>

Но, когда я вызываю это в child, ошибка говорит:

undefined не является объектом!

Дочерний компонент:

<BigNews
id={props.content.main.first.id}
title={props.content.main.first.name}/>

Answer 1

Это потому, что у вашего начального состояния нет этих свойств. Заполните объект начального состояния:

const initialState = {
  "main": {
      "first": {},
      "second": {}
  }
}

const [fetchApiData, setApiData] = useState(initialState);

или используйте Необязательное сцепление

<BigNews
  id={props.content.main.first?.id}
  title={props.content.main.first?.name}/>