如何在反应钩子中将结果状态重置为其初始值答案

【问题标题】：How to reset a result state to its initial value in react hook如何在反应钩子中将结果状态重置为其初始值
【发布时间】：2021-03-19 16:14:40
【问题描述】：

我已经有一个包含额外费用和总费用输入的表格。我想将额外成本的值添加到我的变更事件的总成本中但是当我删除额外成本输入的值时，我希望总成本具有其初始状态值

<input type="text" onChange={((e) => setTotalCost(totalCost + e.target.value))} placeholder="additional cost" />

<div>totalcost: {totalCost}</div>`

这是我的状态：

const [totalCost, setTotalCost] = useState(0)

【问题讨论】：

标签： reactjs react-hooks react-hook-form

【解决方案1】：

const clearState = () => { setTotalCost(0); };

在你想要初始化状态的地方调用上面的函数。

【讨论】：

但初始状态不是 0 我从服务器的响应中接收到它
在我看来，不应该马上加上totalcost和target value，而是在totalcost状态发生变化时使用useEffect获取累计totalcost。

【解决方案2】：

您可以简单地通过检查附加成本的值是否为 not like 来做到这一点：

onChange={(e => {
   if(e.target.value){
     setTotalCost(totalCost + e.target.value);
   }else setTotalCost(0);
})}

如果您从 API 请求中获取初始状态，则可以将其存储在状态中：

const [initialState, setInitialState] = useState();

//Do the API call to set initialState

onChange={(e => {
   if(e.target.value){
     setTotalCost(totalCost + e.target.value);
   }else setTotalCost(initialState);
})}

【讨论】：

但初始状态不是 0 我从服务器的响应中接收到它
更新答案。