循环Laravel验证错误Reactjs中的动态对象

Question

我在Laravel控制器中有一个验证器，并使用ReactJS创建了一个动态对象。问题是，我在显示动态错误时遇到了问题，例如下面的示例listedItems0.itemName或listedItems1.itemName。如果它不是动态的，我可以使用此特定代码来显示它。但如果我尝试使用动态变通方法，它就不会出现在我的页面上。我应该如何修改代码以显示动态对象错误？非常感谢。

代码解决方案

Not Dynamic
{(typeof errors.isDeclared!== 'undefined') ? <p style={{ color:'red' }}>* {errors.isDeclared}</p> : null}
Dynamic Workaround
{(typeof errors.listedItems !== 'undefined') ? <p style={{ color:'red' }}>* {errors.listedItems[0]}</p> : null}

错误消息

errors:
borrowPurpose: ['The borrow purpose field is required.']
isDeclared: ['The is declared field is required.']
listedItems.0.itemName: ['The item name field is required.']
listedItems.0.itemRemark: ['The item remark field is required.']

代码

return (
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-2">
<div className="p-6 bg-white border-b border-gray-200">
<div>
<Row>
<Col><h5>Items <span style={{ color:'red' }}>*</span></h5></Col>
<Col style={{ textAlign:'right' }}><FormAddItem handleAddItem={handleAddItem} /></Col>
{/* <Col style={{ textAlign:'right' }}><Button onClick={() => setValue('listedItems',items)}>Update</Button></Col> */}
</Row>
</div>
{/* <hr /> */}
<input type="text" name="listedItems" {...register('listedItems')} hidden />
<ItemsList data={items} removeItem={removeItem}/>
{(typeof errors.listedItems !== 'undefined') ? <p style={{ color:'red' }}>* {errors.listedItems[0]}</p> : null}
</div>
</div>
}

Answer 1

您可以在React组件的渲染函数中循环listedItems，以动态显示Laravel:返回的许多验证错误

render = () => {
// The rest of your render code here
let errorList = [];
listedItems.forEach((listedIte) => {
errorList.push(<p style={{ color:'red' }}>* {errors.listedItems[0]}</p>)
})

return (
<div>
{errorList}
</div>
)
}