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

Posted 2023-02-22

【中文标题】如何在同一个 React 组件中管理多个 setState 调用？

【英文标题】：How can I manage multiple setState calls in the same React component?

【发布时间】：2020-07-26 11:35:35

【问题描述】：

我正在使用 npm 包来创建数据网格。这个数据网格是一个类组件，并带有行作为状态。我还尝试在数据网格上方添加输入，以允许用户更改这些输入的值，同时更改数据网格的值。但是，只有数据网格值发生了变化。输入没有改变，所以 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;```

【参考方案1】：

输入没有改变，因为 updateDataForm 需要一些改变：

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 调用的问题