javascript - 在 React.JS 中查找函数

Question

我收到的 Prop 数据看起来像

 data: [
    {
        rowNumber: 1,
        specification: null,
        validationMessage: [
            {
                isExists: true,
                errors: [
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "ERR: Length value is not in correct  "
                    },
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "Height Unit is not in correct  "
                    },
                ]
            }
        ]
    },
    {
        rowNumber: 2,
        specification: null,
        validationMessage: [
            {
                isExists: false,
                errors: []
            }
        ]
    },
]

在我的渲染中，我有一个按钮，我试图根据我的错误消息禁用/启用该按钮。如果我的 eoorMessage 包含单词“ERR:”，我将禁用该按钮，否则它将被启用。注意:我的错误消息可能为空，或者可能有也可能没有“Err:”一词。如果“ERR:”一词存在于我的任何错误消息中，我必须禁用该按钮

我已经尝试过了，但它说 x 未定义。我该如何克服这个问题？

render() {

 const hasError = this.props.data ? this.props.data.find((x) => x.validationMessage.erros.find(z => z.errorMessage.indexof("ERR:"))) : ''
    return (
    <div>
        {(this.props.data) ?
            <div>

                (hasError) ?
                <Button variant="contained" className={classes.button} onClick={this.handleSave}>Continue</Button>
                :
                <Button variant="contained" disabled={true} className={classes.button} onClick={this.handleSave}>Continue</Button>

<Button variant="contained" className={classes.button} onClick={this.handleCancle}> Cancel</Button>
                </div>
                : ''}
        </div>
    );

Answer 1

您的代码中存在三个问题。

1. 您正在使用 indexOf() ，如果没有找到元素且其值为 trucy 值，它将返回 -1。您应该使用 includes()
2. 您正在对 x.validationMessage.erros 使用 find()。首先在erros中添加缺少的r。第二。您需要使用 x.validationMessage[0].errors 因为 validationMessage 是一个数组。
3. 您正在data上使用find()，如果您想要所有禁用按钮，它将返回第一个匹配项，否则您应该使用filter() find() 没问题。

你的问题对我来说有点不清楚。我假设想要获取所有包含 "ERR:" 的项目。
如果您想检查其中是否有任何包含 err 或不使用 .some()

let data = [
    {
        rowNumber: 1,
        specification: null,
        validationMessage: [
            {
                isExists: true,
                errors: [
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "ERR: Length value is not in correct  "
                    },
                    {
                        errorCode: "PredicateValidator",
                        errorMessage: "Height Unit is not in correct  "
                    },
                ]
            }
        ]
    },
    {
        rowNumber: 2,
        specification: null,
        validationMessage: [
            {
                isExists: false,
                errors: []
            }
        ]
    },
]


let newarr = data.filter(x=>x.validationMessage[0].errors.find(a=>a.errorMessage.includes('ERR:')))

let isError = data.some(x=>x.validationMessage[0].errors.find(a=>a.errorMessage.includes('ERR:')))

console.log(isError)

console.log(newarr)