為什么我的屬性總是錯誤的，即使它被更改並且是依賴項？

Question

我在我的應用程序中聲明了這些屬性：

  const [lockfileData, setLockFileData] = useState({});
  const [socket, setSocket] = useState<RiotWSProtocol>(null);
  const [api, setApi] = useState<LoLAPI>(null);

  const [champions, setChampions] = useState<Champion[]>([]);
  const [summoner, setSummoner] = useState<Summoner>(null);

  const [autoAcceptQueue, setAutoAccept] = useState(true);
  const [instalockEnabled, setEnableInstalock] = useState(true);
  const [selectedChampion, setSelectedChampion] = useState<Champion>(null);
  const [callRoleEnabled, setCallRoleEnabled] = useState(true);
  const [selectedRole, setSelectedRole] = useState<Role>('Mid');

我的useEffect掛鈎中有一個事件處理程序，在其中處理更多事件：

  const onJsonApiEvent = useCallback(
    (message: any) => {
      //console.log(message);
      if (
        message.uri === '/lol-matchmaking/v1/ready-check' &&
        autoAcceptQueue
      ) {
        if (
          message.data?.state === 'InProgress' &&
          message.data?.playerResponse !== 'Accepted'
        ) {
          api.acceptQueue();
        }
      } else if (
        message.uri === '/lol-champ-select/v1/session' &&
        message.eventType === 'Update'
      ) {
        console.log('enabled?', instalockEnabled)
        if (instalockEnabled) {
          const myCellId = message.data.localPlayerCellId as number;
          const myAction = (message.data.actions[0] as any[]).find(
            (x) => x.actorCellId === myCellId
          );
          if (
            !myAction.completed &&
            myAction.isInProgress &&
            myAction.type === 'pick'
          ) {
            api.pickAndLockChampion(1, myAction.id);
          }
          console.log('myAction', myAction);
        }
      }
    },
    [api, autoAcceptQueue, instalockEnabled]
  );

  const onSocketOpen = useCallback(() => {
    console.log('socket', socket);
    if (socket) {
      socket.subscribe('OnJsonApiEvent', onJsonApiEvent);
    }
  }, [onJsonApiEvent, socket]);

  const onConnect = useCallback((data: LCUCredentials) => {
    setLockFileData(data);
    const lolApi = new LoLAPI(data);
    setApi(lolApi);
    lolApi.getOwnedChampions().then((champs) => {
      setSelectedChampion(champs[0]);
      setChampions(champs);
    });
    lolApi.getCurrentSummoner().then((summoner) => {
      setSummoner(summoner);
    });
    const wss = new RiotWSProtocol(
      `wss://${data.username}:${data.password}@${data.host}:${data.port}`
    );
    setSocket(wss);
  }, []);

  useEffect(() => {
    if (socket) {
      socket.on('open', onSocketOpen);
    }
    connector.on('connect', onConnect);
    connector.start();
    return () => {
      connector.stop();
    };
  }, [onConnect, onSocketOpen, socket]);

依賴項似乎是正確的，因此它應該在每個處理程序中使用最新值。

但是，在onJsonApiEvent處理程序內部，諸如instalockEnabled之類的屬性始終是默認值。

我正在我頁面上的一個組件中更新instalockEnabled的值：

          <FormControlLabel
            control={
              <Checkbox
                checked={instalockEnabled}
                name="instalockEnabled"
                color="primary"
                onChange={handleInstalockEnableChange}
              />
            }
            label="Enabled"
          />

它的處理程序如下所示：

  const handleInstalockEnableChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setEnableInstalock(e.target.checked);
  };

當它是依賴項時，為什么會發生這種情況？

Answer 1

我現在想出的 janky 解決方案是有一個單獨的變量useRef並在更新 state 的同時更新它，因此它仍然存在：

  const [instalockEnabled, setEnableInstalock] = useState(true);
  const instalockEnabledRef = useRef(instalockEnabled);

  const handleInstalockEnableChange = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    setEnableInstalock(e.target.checked);
    instalockEnabledRef.current = e.target.checked;
  };

然后只需在需要知道當前值的事件處理程序中使用instalockEnabledRef.current即可。