如何在react中显示错误;我从redux得到数组错误

Question

这是我从后端节点js-api 获得的redux数组

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>

这是我总是得到的错误

反应错误

Answer 1

由于errors来自异步请求，因此应该确保对象还不存在的情况。

this.props.offices && this.props.offices.errors.errors.map(...)

然而，为了100%确保它不会失败，我会使用offices的defalt值，并检查errors是否存在，它是否是一个可迭代数组。

const { offices = {} } = this.props;
offices.errors && Array.isArray(offices.errors.errors) && offices.errors.errors.map(...);

Answer 2

尝试使用此

关键是，当你想访问嵌套对象时，你需要首先检查嵌套对象是否真的存在，然后像下面的条件检查一样访问它

<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>