Reactjs 将多个字段值保存在状态React中

Reactjs 将多个字段值保存在状态React中,reactjs,Reactjs,我有一个表,我从API中提取它的值。它显示多行公司、办公室、帐户和销售字段。现在我需要添加一种更新字段值的方法,例如用户将更改公司的值,然后单击submit,这将通过API更新数据库中的值 我在这里面临的第一个问题是如何跟踪事物的多种状态,以便在它们发生变化时更新它们并提交新值 我有这个,但我觉得不行 state = {[ firm: null, office: null, salesCode: null, account: nu

我有一个表,我从API中提取它的值。它显示多行公司、办公室、帐户和销售字段。现在我需要添加一种更新字段值的方法,例如用户将更改公司的值,然后单击submit,这将通过API更新数据库中的值

我在这里面临的第一个问题是如何跟踪事物的多种状态,以便在它们发生变化时更新它们并提交新值

我有这个,但我觉得不行

 state = {[
        firm: null,
        office: null,
        salesCode: null,
        account: null
     ]}

这就是在状态中保存数组的方式,如果需要保存其他值,请按照以下步骤操作。感谢@Geeky

state = {
        tableInfo: [{firm:null,
                    office:null,
                    salesCode:null,
                    account:null}],
        newFirm: null,
        newOffice: null,
        newSalesCode: null,
        newAccount: null,
    }

我建议构建一个助手函数来比较这两个值

compareData(currentData, newData) {
    if(currentData === 'undefined' || (newData && currentData !== newData)) {
        return newData;
    } else {
        return false;
    }
}
只要您在输入字段中使用的名称与您在状态中作为密钥使用的名称相匹配,它就应该进行适当的比较,并且只有在状态发生更改时才更新状态

如果您使用输入字段来收集数据,您的代码将如下所示。请记住,您需要构建一个循环来处理多行

<Input type="text" name="firm" onChange={this.handleInputChange} />

handleInputChange(el) {
  const name = el.currentTarget.name;
  const currentValue = this.state[name];
  const newValue = el.currentTarget.value;

  if(this.compareData(currentValue, newValue)) {
    this.setState({ [name]: newValue });
  }
}

如果您能发布一个更大的代码示例,我很乐意提供进一步的帮助。

如果您有多行,那么您的状态应该是这样结构的。状态={arr:[公司:null,办公室:null,销售代码:null,帐户:null]}如果我这样做,它是否会将它们分配为null?tableInfo:[公司、办公室、销售代码、帐户],不,您将收到错误,因为公司未定义,它希望公司是字符串,或者如果必须是值,请确保您将其作为键/值pairokay thank you@GeekyWell I get,每一项上的预期错误: