反应状态不是在点击事件中用两个函数更新，而是用一个函数更新

Question

这个已经被证明是一段时间以来令人头疼的......

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

但是，一旦我将第二个函数添加到单击事件状态不再更新，这将起作用。任何想法为什么会发生这种情况以及我做错了什么？

工作代码...

  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>
      );
     }

Answer 1

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

我从父级中删除了状态更改并且它有效。

感谢 Andrei 将我指向 useCallback！

Answer 2

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

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

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

这是我在函数体中得到的结果（在返回 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 的文档。