[英]How to render grand child and remove JSON object
我有一个Json arry像
Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1: {validationMessage: {…}, id: -2147482622, partTypeId: null, partType: null, partCategoryId: 2, …}
2: {validationMessage: {…}, id: -2147482621, partTypeId: null, partType: null, partCategoryId: 5, …}
从insde看起来像这样
Array(3)
0: {validationMessage: {…}, id: -2147482623, partTypeId: null, partType: null, partCategoryId: 5, …}
1:
repairFacility: null
resourcePredictions: null
revision: null
specification: null
validationMessage:
errors: Array(1)
0:
attemptedValue: "147-6268-5715"
customState: null
errorCode: "PredicateValidator"
errorMessage: "This is warning "
[已解决]我的第一个问题是如何呈现我的验证errorMessage:目前位于我每个数组元素下的-> validationMessage> errors [0]-> errorMessage下,我现在可以呈现其他元素,这是我的代码。 但对于错误消息,它显示x未定义
<TableBody>
{this.props.data ? this.props.data.map((item, i) => (
<TableRow key={i}>
{
x = function myFunction(item) {
if (item.validationMessage.erros[0].length > 0) {
return item.validationMessage.erros[0].errorMessage
} else {
return ''
}
}
}
<TableCell align="right">{x}</TableCell> ////Want to render ERRORMESSAGE
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
)) : ''}
</TableBody>
我的第二个问题是如何从JSON中删除“ validationMessage:”? 这是我的尝试
removemsg() {
const { data } = this.props
let out = null;
if (data) {
out = data.delete("validationMessage");
}
}
若要仅在数组的长度不同于0
呈现错误,可以使用条件呈现。
长度为0
不会使用&&
运算符返回任何内容,因为它是错误的:
<TableBody>
{this.props.data && this.props.data.map((item, i) => (
<TableRow key={i}>
<TableCell align="right">{item.validationMessage.erros[0].length && item.validationMessage.erros[0].errorMessage}</TableCell>
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
))}
</TableBody>
要仅从JSON中提取给定的变量,可以使用解构,然后使用解构运算符...
将对象的所有内容都保留在变量中,这里称为newData
:
removemsg() {
const { data = {} } = this.props
const { validationMessage, ...newData } = data
console.log(newData)
}
但是,您不能直接修改道具。
对于您的第一个问题,您可以简单地将if语句(使用三元运算符)放在{}
括号内,其中您当前拥有x
。 我认为这足够了。 我还可以自由地在map函数中返回内容。
<TableBody>
{
(this.props.data)
? this.props.data.map((item, i) => (
return (
<TableRow key={i}>
<TableCell align="right">
{
(item.validationMessage.errors[0].length > 0)
? item.validationMessage.errors[0].errorMessage
: ''
}
</TableCell>
<TableCell align="right">{item.partNumber}</TableCell>
<TableCell align="right">{item.description}</TableCell>
<TableCell align="right">{item.partCategoryId}</TableCell>
<TableCell align="right">{item.oemPartNumber}</TableCell>
</TableRow>
);
))
: ''
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.