React 状态不是在具有两个函数的单击事件中更新，而是使用一个函数更新

如何解决React 状态不是在具有两个函数的单击事件中更新，而是使用一个函数更新

事实证明，这个问题已经有一段时间了...

我有一个响应组件，可以在单击事件时更新状态。状态是一个简单的布尔值，所以我使用三元运算符来切换状态。

然而，一旦我将第二个函数添加到单击事件状态不再更新，这就会起作用。知道为什么会发生这种情况以及我做错了什么吗？

工作代码...

  export default function Activity(props) {
   const [selected,setSelected] = useState(false);

   const selectActivity = () => {
     selected ? setSelected(false) : setSelected(true);
     return null;
   };

   const clickHandler = (e) => {
       e.preventDefault();
       selectActivity();
     };

      return (
        <div
          onClick={(e) => clickHandler(e)}
          className={`visit card unassigned ${selected ? 'selected' : null}`}
        >
          //... some content here
        </div>
      );
     }

状态未更新...

  export default function Activity(props) {
   const [selected,setSelected] = useState(false);

   const selectActivity = () => {
     selected ? setSelected(false) : setSelected(true);
     return null;
   };

   const clickHandler = (e) => {
       e.preventDefault();
       selectActivity();
       props.collectVisitsForShift(
          props.day,props.startTime,props.endTime,props.customer
       );
     };

      return (
        <div
          onClick={(e) => clickHandler(e)}
          className={`visit card unassigned ${selected ? 'selected' : null}`}
        >
          //... some content here
        </div>
      );
     }

解决方法

我出去散散步，发现了这个。我正在从同一个 onClick 事件更改父组件中的状态，这意味着子组件重新渲染并获得其默认状态“false”。

我从父级中删除了状态更改并且它起作用了。

感谢 Andrei 为我指出 useCallback！

,

我在 CodeSandbox 环境中加载了您的代码，并且在状态更新方面没有遇到任何问题。但我无权访问您的 collectVisitsForShift 函数，因此无法完全重现您的代码。

但是，您切换状态变量的方式不尊重 official guidelines，特别是：

如果下一个状态依赖于当前状态，我们推荐使用updater函数形式

这是我在函数体中得到的结果（在返回 JSX 之前）：

const [selected,setSelected] = useState(false);

// - we make use of useCallback so toggleSelected
//   doesn't get re-defined on every re-render.
// - setSelected receives a function that negates the previous value

const toggleSelected = useCallback(() => setSelected(prev => !prev),[]);

const clickHandler = (e) => {
    e.preventDefault();
    toggleSelected();
    props.collectVisitsForShift(
        props.day,props.startTime,props.endTime,props.customer
    );
};

useCallback 的文档。