从 onChange 事件获取值时，useState 显示之前的状态

Question

我对 React 并没有太多经验，但我正在尝试为自己做一个小项目。

所以我有这个下拉列表，它有 2 个值，我正在尝试 console.log camera 的当前状态，它应该包含您单击的列表选项的值。

假设我第一次点击一个选项，我得到一个空值的日志（我的camera 的初始状态），然后我点击另一个选项，我得到了我记录的选项第一次点击。据我了解，这可能是因为setState 是异步的？

即便如此，我应该怎么做才能解决我的问题，以便当我第一次点击一个选项时，它会记录实际的选项？我正在考虑以某种方式使用useEffect，但我真的不知道如何使用它来处理events。 这是我的代码：

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import style from './Join.module.css';

const Join = () => {

    const [nume, setNume] = useState('')
    const [camera, setCamera] = useState('')


    return (
        <div className={style.mainJoinContainer}>
            <div className={style.secondaryJoinContainer}>
                <h1 className={style.header}>
                    Conecteaza-te!
                    <div>
                        <input placeholder="Nume" className={style.joinInput} type="text" onChange={(event) => { setNume(event.target.value); console.log(nume) }} />
                    </div>
                    <div className={style.margin}>
                        <label>Camera</label>
                        <select name="Camere" placeholder="Camere" onChange={(event) => { setCamera(event.target.value); console.log(camera) }}>
                            <option value="Camere" style={{ display: "none" }}>Camere</option>
                            <option value="Gluma">Gluma</option>
                            <option value="Joke">Jokes</option>
                        </select>
                    </div>
                    <Link to="/interaction/chat">
                        <button className={`${style.joinButton} ${style.margin}`} type="submit">Logheaza-te</button>
                    </Link>
                </h1>
            </div>
        </div >
    )
}

export default Join

对于这个问题，我将不胜感激。我已经尝试查找一些类似的情况并出于某种原因尝试了useEffect 或async-await，但我自己无法真正弄清楚。感谢您的宝贵时间！

Answer 1

您可以使用useEffect 来“监视”状态变量。

useEffect(() => {
    // do stuff
    console.log(camera);
}, [camera]);