React Hooks中如何以最新state值为参数派发action

解法1：直接使用已生成的新值（优先推荐） #

你当前场景下新的roomId已经在回调函数内生成，不需要依赖state更新后的返回值，直接把生成的变量传入action即可：

const _handleCreateRoom = () => {
    const generatedRoomId = generateCode();
    setRoomId(generatedRoomId);
    // 直接传递当前生成的有效值，无需等待state异步更新
    dispatch(createRoom(generatedRoomId));
}

该方案无额外性能开销，是当前场景的最优解。

解法2：通过useEffect监听state变化触发action #

如果你的roomId可能被多个逻辑修改（比如用户输入、其他接口返回赋值等），只要更新就需要派发对应action，可以把dispatch逻辑放到监听roomId的副作用中：

const [roomId, setRoomId] = useState("");

useEffect(() => {
  // 增加判空逻辑，避免初始化时空值触发无效action
  if (roomId) {
    dispatch(createRoom(roomId));
  }
}, [roomId, dispatch]);

const _handleCreateRoom = () => {
    const generatedRoomId = generateCode();
    setRoomId(generatedRoomId);
}

解法3：用useRef存储state快照同步取值 #

如果需要在同一个回调内多次读取最新的state值，可以用useRef维护一份和state同步的快照：

const [roomId, setRoomId] = useState("");
const roomIdRef = useRef(roomId);

// 自动同步state和ref的值
useEffect(() => {
  roomIdRef.current = roomId;
}, [roomId]);

const _handleCreateRoom = () => {
    const generatedRoomId = generateCode();
    setRoomId(generatedRoomId);
    // 手动更新当前回调内的ref值
    roomIdRef.current = generatedRoomId;
    dispatch(createRoom(roomIdRef.current));
}

该方案适合存在多段异步逻辑、需要随时读取最新state的复杂场景。

内容的提问来源于stack exchange，提问作者James