在某些场景下绕过 useState 是正确的做法吗？

Question

我的 React 组件中有两种状态：

// Selected item state
const [selectedItem, setSelectedItem] = React.useState(null);

// Toggle callout visibility
const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);

我有一个重置功能来重置我的状态。为了防止双重重新渲染，我绕过了 setIsCalloutVisible:

const reset = () => {
  isCalloutVisible = false;
  setSelectedItem(null);
}

这是正确的做法吗？或者是否有更简洁的方法在一次重新渲染中重置两种状态？

[edit] 感谢您的第一条评论和回复，显然将两者合并为一个状态会有所帮助。我想了解的是为什么我目前的做法不正确，以及负面影响是什么。

Answer 1

你可以创建这样的东西

const [data, setData] = react.useState({ 
  isCalloutVisible: false, 
  selectedItem: null 
})
const reset = () => {
  setData({
    isCalloutVisible: false,
    selectedItem: false
  })
}

Answer 2

给定以下组件状态：

// Selected item state
const [selectedItem, setSelectedItem] = React.useState(null);

// Toggle callout visibility
const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);

如果您想在单个回调中重置两个状态值，只需将两个状态更新加入队列即可。

const reset = () => {
  setSelectedItem(null);
  setIsCalloutVisible(false);
}

来自单个渲染周期的所有 React 状态更新都在个渲染周期之间进行批处理，并为下一个周期返回计算的状态。

State updates may be Asynchronous & Batched

在某些场景下绕过 useState 是正确的做法吗？

Is it correct practice to bypass useState in some scenarios?

reactjs

react-hooks

use-state