reactjs - 反应，无法正确管理 handleChange

Question

我有以下 useEffects，它通过读取 json (redisServers) 来设置服务器的名称。

const [selectedServer, setSelectedServer] = React.useState<string>("");
 React.useEffect(() => {
        let server = redisServers.servers[config.ENV].filter(i => i.default)[0]
        if (server) {
            let cServer = server.ip + ":" + server.port // example.com:1234
            setSelectedServer(cServer)
            setSelectedDB(server.db)
        }
        props.loadServerInfo(server.ip, server.port, server.db);
        getUsersToken(server.ip, server.port, server.db);
    }, []);

从技术上讲，我的状态变为 example.com:1234

我也有这个来管理状态已经设置。

const [firstLoad, setFirstLoad] = React.useState<boolean>(false)
React.useEffect(() => {
        console.log(selectedServer)
        setFirstLoad(true)
    }, [selectedServer])

然后我对这些信息所做的就是将它加载到一堆输入中。

    {firstLoad ?
                <div className="basic-server-info-container">
                    <div className="basic-server-info-data">
                        <p><img src={redisLogo} /></p>
    
                        <select name="ip" id="ip" onChange={(e) => handleChange(e)}>
                            {redisServers.servers[config.ENV].map(i => {
                                if (i.default) {
                                    return <option selected value={i.ip + ":" + i.port + ":" + i.db}>{i.label}</option>
                                } else if (!i.default) {
                                    return <option value={i.ip + ":" + i.port + ":" + i.db}>{i.label}</option>
                                }
                            })}
                        </select>
                        <p>Server: <i >{checkEnv(true)}</i></p> */}
<p>Ip</p><input value={selectedServer.split(':')[0]} onChange={handleIpChange} /> {/*issue*/}
                    <p>Port</p><input value={selectedServer.split(':')[1]} onChange={handlePortChange} />  {/*issue*/}
                    <p>Db</p><input value={selectedDB.toString()} onChange={handleDbChange} />  {/*Works Fine*/}
                        <p>Uptime: <i>{props.redisReducer?.serverInfo?.Server?.uptime_in_days} days</i></p>
                        <p>Tokens (displayed): <i>{redisToken.length}</i></p>
                    </div>
    
                </div>: null}

现在，我可以在 db 中使用 onChange。

const handleDbChange = React.useCallback(e => {
        setSelectedDB(e.target.value)
    }, [])

它工作正常。

但它在 hadbleIpChange 和 handlePortChange 中无法正常工作

const handleIpChange = React.useCallback(e => {
        console.log("selectedServer")
        console.log(selectedServer)
        let port = selectedServer.split(":")[1]
        setSelectedServer(e.target.value + ":" + port)
    }, [])

    const handlePortChange = React.useCallback(e => {
        let ip = selectedServer.split(":")[0]
        setSelectedServer(e.target.value + ":" + ip)
    }, [])

因为显然 selectedServer 是"". （我在第一个useEffect中定义了？）

同时 selectedDB 指的是

const [selectedDB, setSelectedDB] = React.useState<Number>(0)

工作正常。

为什么我不能处理更改选定的服务器？

标签： reactjs