React首次渲染无法识别输入框更新的state问题求助

我用React构建测试API的客户端，Node.js经验比React/state/hook多。当前遇到的问题：

• 三个输入框绑定subscriber useState，通过handleChange更新状态，输入时状态显示正常。
• 另一个logOrReg useState控制登录/注册切换，包含提交按钮触发的函数、按钮文本等。
• 首次渲染时状态设置正确，但提交postSub时，subscriber是空值；切换登录/注册状态再切回后，提交能拿到当时的subscriber值，但之后更新输入框，提交的还是切回时的旧值。
• React DevTools显示状态正常更新，推测是对useState的理解有误。

附原代码：

import React, {useState, useEffect} from 'react'
import Pusher from 'pusher-js';
import axios from "axios";
import Table from '@mui/material/Table';
import TableHead from '@mui/material/TableHead';
import TableCell from '@mui/material/TableCell';
import TableRow from '@mui/material/TableRow';

const PUSHER_APP_KEY = "b4173b2b1b29274b8621";
const PUSHER_APP_CLUSTER = "eu";

function Resthome(e) {

    const pusher = new Pusher(PUSHER_APP_KEY, {cluster: PUSHER_APP_CLUSTER})

    useEffect(() => {
        const channel = pusher.subscribe("rests")
        let mounted = true;
        if (mounted) {
            console.log("mounted")
            channel.bind("inserted", (data) => {
                console.log("inserted")
                console.log("data", JSON.stringify(data))
                alert("you have been subscribed")
            })
        }
        return (() => {
            pusher.unsubscribe("rests")
            mounted = false
        })
    }, []);

    function LoginOrRegister() {
        const [subscriber, setSubscriber] = useState({
            username: "",
            password: "",
            confirmPassword: ""
        })

        const [logOrReg, setLogOrReg] = useState({
            type: "reg", 
            function: postSub, 
            submitButton: "register", 
            switchButton: "already have an account?"
        })

        function handleChange(event) {
            const newValue = event.target.value;
            const inputName = event.target.name;

            setSubscriber(prevValue => {
                if (inputName === "username") {
                    return {username: newValue, password: prevValue.password, confirmPassword: prevValue.confirmPassword}
                } else if (inputName === "password") {
                    return {username: prevValue.username, password: newValue, confirmPassword: prevValue.confirmPassword}
                } else if (inputName === "confirmPassword") {
                    return {username: prevValue.username, password: prevValue.password, confirmPassword: newValue}
                }
            })
            console.log("set sub username", subscriber.username, "set sub password", subscriber.password)
        }

        function Switch(e) {
            e.preventDefault()
            if (logOrReg.type === "reg") {
                setLogOrReg({type: "log", function: logUser, submitButton: "login", switchButton: "Dont have an account?"})
            } else if (logOrReg.type === "log") {
                setLogOrReg({type: "reg", function: postSub, submitButton: "register", switchButton: "Already have an account?"})
            }
        }

        async function postSub(e) {
            e.preventDefault()
            console.log("password", subscriber.password, "username", subscriber.username)
            try {
                if (subscriber.password === subscriber.confirmPassword) {
                    await axios.post("http://localhost:3000/restaurants/register", {
                        username: subscriber.username,
                        password: subscriber.password
                    }).then(response => {
                        if (response.status === 201) {
                            console.log("request sent successfully")
                        }
                    })
                } else {
                    alert("Passwords dont match")
                }
            } catch (err) {
                console.log(err)
            }
        }

        async function logUser(e) {
            e.preventDefault()
            try {
                if (subscriber.password === subscriber.confirmPassword) {
                    await axios.post("http://localhost:3000/restaurants/login", {
                        username: subscriber.username,
                        password: subscriber.password
                    }).then(response => {
                        if (response.status === 201) {
                            console.log("request sent successfully")
                            console.log(response)
                        }
                    })
                } else {
                    alert("Passwords dont match")
                }
            } catch (err) {
                console.log(err)
            }
        }

        return (
            <div>
                <form onSubmit={logOrReg.function}>
                    <h1>Signup</h1>
                    <input
                        name="username"
                        onChange={handleChange}
                        placeholder="username"
                        value={subscriber.username}
                        label="email"></input>
                    <input
                        name="password"
                        onChange={handleChange}
                        placeholder="password"
                        value={subscriber.password}
                        label="password"></input>
                    <input
                        name="confirmPassword"
                        onChange={handleChange}
                        placeholder="confirmPassword"
                        value={subscriber.confirmPassword}
                        label="password"></input>
                    <button type="submit">
                        <h3>{logOrReg.submitButton}</h3>
                    </button>
                </form>
                <button name="login-or-register" onClick={Switch}>
                    <h3>{logOrReg.switchButton}</h3>
                </button>
            </div>
        )
    };

    return (
        <div>
            <LoginOrRegister/>
            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell align="right">Total</TableCell>
                        <TableCell align="right">Item names</TableCell>
                        <TableCell align="right">Status</TableCell>
                        <TableCell align="right">Time Placed</TableCell>
                    </TableRow>
                </TableHead>
            </Table>
        </div>
    )
}

export default Resthome

问题根源是React闭包陷阱：
当你在logOrReg状态中存储postSub/logUser函数时，这些函数是组件首次渲染时创建的，它们捕获了当时的subscriber状态（空对象）。后续subscriber更新时，logOrReg里的函数还是旧的，依然引用着最初的空subscriber。只有切换状态重新设置logOrReg时，才会存入当前的函数（此时捕获了切换时的subscriber），但之后subscriber再更新，这个函数又会变成旧的，无法获取最新值。

修复方法：不要将函数存入状态，直接在提交时判断类型调用对应函数 #

修改logOrReg状态，去掉function字段，只保留类型和按钮文本：

const [logOrReg, setLogOrReg] = useState({
    type: "reg", 
    submitButton: "register", 
    switchButton: "already have an account?"
})

修改表单的onSubmit事件，根据logOrReg.type动态调用对应函数：

<form onSubmit={(e) => logOrReg.type === 'reg' ? postSub(e) : logUser(e)}>

修改Switch函数，不再需要设置function字段：

function Switch(e) {
    e.preventDefault()
    if (logOrReg.type === "reg") {
        setLogOrReg({type: "log", submitButton: "login", switchButton: "Dont have an account?"})
    } else if (logOrReg.type === "log") {
        setLogOrReg({type: "reg", submitButton: "register", switchButton: "Already have an account?"})
    }
}

这样每次提交时，调用的都是最新的postSub/logUser函数，能获取到最新的subscriber状态值。

额外优化：简化handleChange函数 #

可以用展开运算符简化状态更新逻辑，避免重复代码：

function handleChange(event) {
    const { name, value } = event.target;
    setSubscriber(prev => ({ ...prev, [name]: value }));
}

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