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

Question

I am using an npm package for creating a data grid. This datagrid is a class component and comes with rows as state. I am also trying to add inputs above the data grid that allow users to change the values of these inputs while also changing the values of the data grid. However, only the data grid values are changing. The inputs are NOT changing so the updateFormData function isn't working

Here is the code

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;```

Answer 1

The inputs are not changing because the updateDataForm need some changes:

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

Then you call it like this:

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