Reactjs是此处需要的setState，用于更改状态下的对象的值

Question

我的问题是，在这种情况下不使用setState是否可以，或者如果应该的话，我将如何处理？

我正在创建一个体育博彩应用程序。

在游戏列表上，当用户单击“丹佛野马-3”时，将创建一个投注单。这也称为
setState({gameSelected:[item]})在父组件中。

它存储该对象，并在单击更多下注时使用价差运算符添加到该对象。

我将该数据传递到betSlip.js文件。

旁注 gameSelected对象中的某些数据具有：
风险：''，
赢：”，

在betSlip.js上，我正在遍历该数据并显示它。

循环内的相关代码。

<input type="text" placeholder="Risk" onChange={(e)=>this.handleBet(e,item)}/>
<input type="text"  placeholder="Win" value={item.win}/>

此函数位于betSlip.js内

 handleBet = (e,item) =>{

      let bet=e.target.value
    //function to calculate moneyline bet
      let calcBet =(bet)=>{
          let newAmount =(100/item.juice)*bet;
          return newAmount
      }

      item.win = calcBet(bet)


    }

Answer 1

是的，您应该在此处使用setState更新item.win。否则，React无法识别item上的突变，并且不会重新呈现。由于item是一个道具，因此您应该在betSlip.js中将其视为不可变的，并通过维护了item.win的父组件中的事件处理程序来更新item。您的betSlip.js组件可能具有onWinUpdate处理程序，该处理程序在handleBet中被称为this.props.onWinUpdate(item, calcBet(bet))。然后，父组件可以具有更新状态的函数handleWinUpdate(item, bet)。通过执行类似的操作，我还将在handleWinUpdate中保持不变：

handleWinUpdate(item, bet) {
  this.setState(state => ({
    gameSelected: state.gameSelected.map(i => {
      if (i === item) {
        return { ...i, win: bet };
      } else {
        return i;
      }
    })
  }));
}

请注意，我们正在将gameSelected设置为新数组，并使用新的item副本（但使用新的item值）替换该数组中的win。没有对象发生过变异。

即使您在这里不必使用不变性，我发现它也更容易推理，并且以后使用诸如React.PureComponent之类依赖不变性的东西为性能提升打开了大门。