React 状态变量未在函数中更新

Question

我正在创建一个聊天应用程序，除了一个问题外，它工作正常：当我调用传递给子组件的函数时，它使用状态变量的 initial值，而不是它的当前值。我包含了下面的代码和使用错误值显示它的日志片段。为什么要这样做？跟LioWebRTC有关系吗？请指教

注意：我添加了一个调用相同函数的额外按钮，当前状态确实为此打印，所以它似乎与 LioWebRTC 有关？它怎么可能不使用当前状态？

import React, { useState, useEffect } from 'react';
import { LioWebRTC } from 'react-liowebrtc';
import ChatBox from './ChatBox';


const ChatWrapper = props => {

  const [counter, setCounter] = useState(0)

  console.log("Correct Counter:", counter)

  useEffect( () => {
    setCounter(counter => counter +1 );
  } , [] );

  const addChat = (name, message, alert = false) => {};

  const join = (webrtc) => webrtc.joinRoom(props.roomID.toString());

  const handleCreatedPeer = (webrtc, peer) => {
    setCounter(counter => counter +1 );
  }

  const handlePeerData = (webrtc, type, payload, peer) => {
    console.log("Problem Counter: " , counter);
  }

  return (

    <div className='screenInterior'>

      <LioWebRTC
        options={{ debug: true,
                   dataOnly: true,
                   nick: "Blah" }}
        onReady={join}
        onCreatedPeer={handleCreatedPeer}
        onReceivedPeerData={handlePeerData}  >

        <ChatBox
          chatLog={null}
          onSend={(msg) => msg && addChat('Me', msg)}
        />

        <button onClick={handlePeerData}>Test</button>

      </LioWebRTC>

    </div>
  );
}

export default ChatWrapper;

Answer 1

创建状态引用并在回调中传递它。

const [counter, setCounter] = useState(0)
const stateRef = useRef();
stateRef.current = counter;

const handlePeerData = (webrtc, type, payload, peer) => {
  console.log("Counter: " , stateRef.current);
}

不要忘记从 React 导入 { useRef }。

更多信息

编辑： 如果您想使用自定义包，react-useStateRef 可以帮助您以更少的代码获得一个带有引用的状态。

导入

import useState from 'react-usestateref'

正在使用

const [counter, setCounter, counterRef] = useState(0);

React 状态变量未在函数中更新

React State Variables Not Updating in Function

reactjs

use-state

liowebrtc