У меня в настоящее время есть jsx в моем компоненте React, который будет возвращать определенные функции, основываясь на том, есть ли определенное значение в объекте.Например, в моем компоненте React:
if(customer.product.id === "543"){
return (
<div className="text-align-left">
<div className="row">
<div className="col-xs-12 font-weight-bold">
<p>Some text here</p>
</div>
</div>
</div>
);
} else {
return (
<div className="text-align-left">
<div className="row">
<p>Different text here</p>
</div>
</div>
</div>
);
«клиент» приходит из моего состояния Redux и отправляет его соответствующим образом и выглядит следующим образом:
{
"product": {
"id": "543",
},
"info": [
{
"name": {
"title": "Mr",
"first_name": "John",
"last_name": "Smith",
},
"dob": "1956-06-06",
"phone": [
{
"number": "5555555555",
"ext": "234",
}
]
}
]
}
Я знаю, что отправка выполняется правильно, потому чтоесли я пытаюсь получить доступ к customer.info [0] .name.last_name в jsx, он возвращает правильное значение.
Тем не менее, когда я пытаюсь получить значение для customer.product.id, с которым меня встречаютошибка
TypeError: Cannot read property 'id' of undefined
Из прочтения здесь других вопросов, возможно, проблема в том, что объект, который я получаю из состояния Redux, является асинхронным, но если он может войти и получить доступ к customer.info[0] .name.last_name, почему он не может сделать то же самое с customer.product.id?Я попытался использовать блок try catch, но это тоже не сработало (также наличие оператора if else в try catch не совсем сухой код).Многие другие вопросы, которые я нашел здесь по этой проблеме при использовании React, касались компонента с локальным состоянием an.
Я прошу прощения, если этот вопрос является дубликатом другого вопроса, но я не могу найти вопрос, который соответствует этой ситуации.Спасибо!