我们如何在不删除状态字段的情况下进行更新？（在 React / JavaScript 中）

debugcn 发表于 Dev

你好工程师

我们如何在不删除状态字段的情况下进行更新？

async componentDidMount() {
    let { get_financial_assessment } = await DAO.getFinancialAssessment()
    if( get_financial_assessment ) {
        this.setState(get_financial_assessment); <- something with prevState...
    } else {
        // To-Do: Show the error page.
        console.log('You must login to see this page');
    }
}

这是状态

state = {
    income_source: '',
    employment_status: '',
    employment_industry: '',
    occupation: '',
    source_of_wealth: '',
    education_level: '',
    net_income: '',
    estimated_worth: '',
    account_turnover: '',
}

如果我们得到get_financial_assessmentas {}，则状态当前更新为{}。:(

我们怎样才能防止这种情况发生？

更新样本输入

{
    account_turnover: "$25,000 - $50,000",
    cfd_score: 0, <- see this is extra field and this is unintentionally added to our state.
    education_level: "Secondary",
    employment_industry: ...

    ...
}

After setState,state将保留我在中指定的相同字段state并更新每个相应字段的值。

问题

有时 json 数据没有必填字段并删除 .json 中的字段state。
有一个额外的字段，它正在添加到我们的 state

尼基尔·阿加瓦尔

从问题可以有2种情况

1. 所有值为 '' 的对象

要检查所有键为 '' 的对象，您必须将代码更新为以下

if( get_financial_assessment && Object.values(get_financial_assessment).every(v => v !== '')) {
   this.setState(get_financial_assessment); 
} else {
    // To-Do: Show the error page.
    console.log('You must login to see this page');
}

2. 空对象（无键）

空对象{}不会评估为假，因此您必须更新 if 语句以检查空对象，如下所示

if( get_financial_assessment && Object.keys(get_financial_assessment).length) {
   this.setState(get_financial_assessment); 
} else {
    // To-Do: Show the error page.
    console.log('You must login to see this page');
}

编辑

您可以事先准备好对象，然后使用setState函数进行设置。

// original state
let state = {account_turnover: "$25,000 - $50,000",cfd_score: 0};
// Response with updated, missing and additional keys
let data = {cfd_score: 3,education_level: "Secondary",employment_industry: ""};

// Update the current state object and set using setState
Object.entries(state).forEach(([k,v]) => state[k] = data[k] ? data[k] : v);
console.log(state);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。