Как я могу отображать ошибки в React; я получаю ошибки массива от redux?
это мой массив redux, который я получаю от backend node js api
errors:
errors: Array(1)
0: {location: "body", param: "name", value: "mamadou bah transfert", msg: "ce nom est déja utilisé"}
length: 1И в React я пытаюсь показать такие ошибки
<div class = "col m12">
{this.props.offices.errors.errors?
<span className = "center-align red-text">
{this.props.offices.errors.errors.map((error,i) => <p key = {i}> {error.param=='name'?error.msg:''}</p>)
</span> : '' }
</div>это ошибки, которые я получаю всегда
Код в вашей ошибке не соответствует коду в вашем вопросе. this.props.offices.errors ? против this.props.offices.errors.errors ? .
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку errors поступает из асинхронного запроса, вы должны защитить случай, когда объект еще не существует.
this.props.offices && this.props.offices.errors.errors.map(...)
Однако, чтобы быть на 100% уверенным, что это не произойдет, я бы использовал значение по умолчанию offices, а также проверял, существует ли errors и это повторяемый массив.
const { offices = {} } = this.props;
offices.errors && Array.isArray(offices.errors.errors) && offices.errors.errors.map(...);
в этом может быть дело :)
Попробуйте с этим
Дело в том, что когда вы хотите получить доступ к вложенным объектам, вам нужно сначала проверить, действительно ли существует вложенный объект, а затем получить к нему доступ, как с помощью условной проверки ниже в вашем случае
<div class = "col m12">
{this.props.offices && this.props.offices.errors && this.props.offices.errors.errors?
<span className = "center-align red-text">
{this.props.offices.errors.errors.map((error,i) => <p key = {"Key-"+i}> {error.param=='name'?error.msg:''}</p>)
</span> : '' }
</div>
сделай
console.info(this.props.offices)и напиши здесь вывод. Тогда я могу помочь вам, так как мне нужно увидеть структуру вашего объекта / списка.