Javascript 如何在同一个React组件中管理多个setState调用？

我正在使用一个npm包来创建一个数据网格。此datagrid是一个类组件，带有行作为状态。我还尝试在数据网格上方添加输入，允许用户更改这些输入的值，同时更改数据网格的值。但是，只有数据网格值在更改。输入未更改，因此updateFormData函数不起作用

这是密码

import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./SellPressure.css";

const columns = [
  { key: "layer", name: "Layer", editable: false },
  { key: "electric", name: "Elec. Rate", editable: true, resizable: true },
  { key: "percentHash", name: "% Hash", editable: true },
  { key: "percentHashAfterBlowout", name: "Adj. % Hash", editable: false },
  { key: "oldGen", name: "S9 Cost", editable: false },
  { key: "newGen", name: "S17 Cost", editable: false },
  { key: "OldGenTier", name: "S9 %", editable: false },
  { key: "NewGenTier", name: "S17 %", editable: false },
  { key: "OldGenTierBlowout", name: "Adj. S9%", editable: false },
  { key: "NewGenTierBlowout", name: "Adj. S17%", editable: false },
  { key: "percentSold", name: "% Sold", editable: false },
  { key: "BTCSold", name: "BTC Sold", editable: false },
];


const rows = [
  { layer: 1, electric: .020, percentHash: 5, percentHashAfterBlowout: 0, oldGen: 0, newGen: 0,
  OldGenTier: 0, NewGenTier: 0, OldGenTierBlowout: 0, NewGenTierBlowout: 0, percentSold: 0, BTCSold: 0
}
];

// require complex functions to determine their value
// percentHashAfterBlowout,
// OldGenTierBlowout,
// percentSold




class Example extends React.Component {
  // state = { rows };

  state = {
      rows: [...rows],
      rewardYo: "",
      btcPriceYo: this.props.btcPrice,
      difficultyYo: this.props.difficulty,
      s9Hash: 13.5,
      s17Hash: 50,
      s9Power: 1400,
      s17Power: 2100 
  }



  updateFormData = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };


  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };




  render() {
    return (

<div>

        <input
        value={this.state.rewardYo}
        onChange={this.updateFormData}
        type="number"
        name="rewardYo"
        required
        />

<input
        value={this.state.btcPriceYo}
        onChange={this.updateFormData}
        type="btcPriceYo"
        name="btcPriceYo"
        required 
        />

  <div>
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={1}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
        cellRangeSelection={{
          onStart: args => console.log(rows),
          onUpdate: args => console.log(rows),
          onComplete: args => console.log(rows)
        }}
      />
  </div>
</div>
    );
  }
}

export default Example;```

从“react-dom”导入ReactDOM；
从“react数据网格”导入ReactDataGrid；
导入“/SellPressure.css”；
常量列=[
{key:“layer”，name:“layer”，可编辑：false}，
{key:“electric”，name:“Elec.Rate”，可编辑：true，可调整大小：true}，
{键：“percentHash”，名称：“%Hash”，可编辑：true}，
{key:“percenthashafterblow”，name:“Adj.%Hash”，可编辑：false}，
{键：“oldGen”，名称：“S9成本”，可编辑：false}，
{键：“newGen”，名称：“S17成本”，可编辑：false}，
{键：“OldGenTier”，名称：“S9%”，可编辑：false}，
{key:“NewGenTier”，name:“S17%”，可编辑：false}，
{key:“OldGentierBloove”，名称：“Adj.S9%”，可编辑：false}，
{key:“newGentierBloove”，名称：“Adj.S17%”，可编辑：false}，
{键：“已售出百分比”，名称：“%已售出”，可编辑：false}，
{键：“BTCSold”，名称：“BTC已售出”，可编辑：false}，
];
常量行=[
{layer:1，electric:020，percentHash:5，percentHash:0，oldGen:0，newGen:0，
OldGenTier:0，NewGenTier:0，OldGenTier井喷：0，NewGenTier井喷：0，销售百分比：0，BTCSold:0
}
];
//需要复杂的函数来确定其值
//井喷发生后,，
//老绅士，
//售出百分比
类示例扩展了React.Component{
//状态={rows}；
状态={
行：[……行]，
奖赏：“，
btcPriceYo:this.props.btcPrice，
困难YO:这个。道具。困难，
s9Hash:13.5，
s17Hash:50，
s9Power:1400，
S17功率：2100
}
updateFormData=事件=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
onGridRowsUpdated=（{fromRow，toRow，updated}）=>{
this.setState（state=>{
const rows=state.rows.slice（）；
for（设i=fromRow；i console.log（行），
onUpdate:args=>console.log（行），
onComplete:args=>console.log（行）
}}
/>
);
}
}
导出默认示例```

输入没有更改，因为更新的数据表单需要一些更改：

updateFormData = (event, stateName) => {
    this.setState({
      [stateName]: event.target.value
    });
  };

然后你这样称呼它：

onChange={(e) => this.updateFormData(e, 'theStateYouWantToChange')}

---

只是尝试了一下，但没有成功。所以我试图修改状态中的rewardYo。那么你是说放置onChange={（event）=>this.updateFormData（event，'rewardYo'）}但是如果我注释掉ReactDataGrid和onGridRowsUpdated，那么输入工作，它会改变状态，所以我认为这是有两个setState调用的问题