在React.JS中查找功能

Question

我收到的道具數據看起來像

 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: []
            }
        ]
    },
]

在渲染中，我有一個按鈕，並且我嘗試根據我的errorMessage禁用/啟用該按鈕。 如果我的eoorMessage包含單詞“ ERR：”，我將禁用該按鈕，否則將啟用它。 注意：我的errorMessage可能為空，也可能沒有單詞“ 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() ，如果未找到任何元素及其真實值，它將返回-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) 

Answer 2

首先，您需要修復validationMessage.erros和.indexof等拼寫錯誤。 根據您的數據，``應為validationMessage.errors ，而.indexof應為.indexOf 。

其次，您需要了解indexOf。 當您的數據errorMessage: "ERR: ...表達式z.errorMessage.indexOf("ERR:"))將返回0 ，該值在boolean中為false 。

要解決此問題，您需要將其更新為z.errorMessage.indexOf("ERR:") >=0以便hasError變量為：

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