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

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]);

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

useState displays previous state when getting value from onChange event

javascript

state

reactjs

dropdown

use-state