这是使用useState钩子的功能组件的常见问题。同样的问题适用于任何useState使用状态的回调函数，例如setTimeout或setInterval定时器函数。

事件处理程序在CardsProvider和Card组件中的处理方式不同。

handleCardClick和handleButtonClick使用在CardsProvider功能组件中的定义在其范围内。每次运行都会有新的函数，它们指的cards是定义它们时获得的状态。每次CardsProvider呈现组件时都会重新注册事件处理程序。

handleCardClick在Card功能组件中使用的作为 prop 接收并在组件挂载时注册一次useEffect。它在整个组件生命周期中都是相同的函数，并且指的handleCardClick是第一次定义函数时新鲜的陈旧状态。handleButtonClick作为props接收并在每次Card渲染时重新注册，它每次都是一个新函数并且指的是新鲜状态。

可变状态

解决此问题的常用方法是使用useRef代替useState。ref 基本上是一个配方，它提供了一个可以通过引用传递的可变对象：

const ref = useRef(0);

function eventListener() {
  ref.current++;
}

在这种情况下，应该像预期的那样在状态更新时重新呈现组件useState，引用不适用。

可以分别保持状态更新和可变状态，但forceUpdate在类和函数组件中都被视为反模式（列出仅供参考）：

const useForceUpdate = () => {
  const [, setState] = useState();
  return () => setState({});
}

const ref = useRef(0);
const forceUpdate = useForceUpdate();

function eventListener() {
  ref.current++;
  forceUpdate();
}

状态更新器功能

一种解决方案是使用状态更新器函数，该函数从封闭范围接收新鲜状态而不是陈旧状态：

function eventListener() {
  // doesn't matter how often the listener is registered
  setState(freshState => freshState + 1);
}

在这种情况下，同步副作用需要一个状态，例如console.log，解决方法是返回相同的状态以防止更新。

function eventListener() {
  setState(freshState => {
    console.log(freshState);
    return freshState;
  });
}

useEffect(() => {
  // register eventListener once

  return () => {
    // unregister eventListener once
  };
}, []);

这不适用于异步副作用，尤其是async函数。

手动事件监听器重新注册

另一种解决方案是每次都重新注册事件侦听器，因此回调始终从封闭范围内获得新状态：

function eventListener() {
  console.log(state);
}

useEffect(() => {
  // register eventListener on each state update

  return () => {
    // unregister eventListener
  };
}, [state]);

内置事件处理

除非事件侦听器注册在或当前组件范围之外的其他事件目标上document，window否则必须尽可能使用 React 自己的 DOM 事件处理，这样就不需要useEffect：

<button onClick={eventListener} />

在最后一种情况下，事件侦听器可以在作为 prop 传递时使用useMemo或useCallback防止不必要的重新渲染：

const eventListener = useCallback(() => {
  console.log(state);
}, [state]);

• 此答案的上一版本建议使用可变状态，该状态适用useState于 React 16.7.0-alpha 版本中的初始钩子实现，但在最终的 React 16.8 实现中不可用。useState目前仅支持不可变状态。*

解决这个问题的更简洁的方法是创建一个我调用的钩子 useStateRef

function useStateRef(initialValue) {
  const [value, setValue] = useState(initialValue);

  const ref = useRef(value);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return [value, setValue, ref];
}

您现在可以将ref用作状态值的引用。

对我的简短回答

这不会在myvar 更改时触发重新渲染。

const [myvar, setMyvar] = useState('')
  useEffect(() => {    
    setMyvar('foo')
  }, []);

这将触发渲染 -> 将myvar 放入 []

const [myvar, setMyvar] = useState('')
  useEffect(() => {    
    setMyvar('foo')
  }, [myvar]);

对我来说简短的回答是 useState 有一个简单的解决方案：

function Example() {
  const [state, setState] = useState(initialState);

  function update(updates) {
    // this might be stale
    setState({...state, ...updates});
    // but you can pass setState a function instead
    setState(currentState => ({...currentState, ...updates}));
  }

  //...
}

检查控制台，你会得到答案：

React Hook useEffect has a missing dependency: 'props.handleCardClick'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

只需添加props.handleCardClick到依赖项数组，它就会正常工作。