为什么 React 第一次调用函数时返回空？ [复制]答案

【问题标题】：Why React returns empty when calling a function for the first time? [duplicate]为什么 React 第一次调用函数时返回空？ [复制]
【发布时间】：2022-01-08 04:30:41
【问题描述】：

当我在输入元素中输入第一个字符时，我得到“空字符串”。

function form(props) {
    // function getData(e){
    //     e.preventDefault()
    //     console.log(e.target[1].value)
    const [title, setTitle] = useState("")

    function getTitle(e){
        setTitle(e.target.value)
        console.log(title) //First time shows "empty string"
    }

    
    return (
        <form >
            <div>
                <label >Title</label>
                <input type="text"  name="title" onChange={getTitle} />
            </div>
    </form>)

在我看来，我在输入元素中输入一个字符，“onChange”事件被触发，函数getTitle被运行，它设置“title”变量，该变量被挂接到useState钩子，然后我控制台结果。按照这个推理，我希望输入第一个字符。相反，我得到“空字符串”。从第二个字符开始，控制台打印字符。

使用“onInput”功能也是如此。

如何解决这个问题以及为什么会发生？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

setTitle异步，你必须检查title在useEffect中的变化

useEffect(() => {
   console.log(title);
}, [title])

【讨论】：

【解决方案2】：

设置状态是异步的，因此您的console.log 在设置状态之前就已运行。如果您使用useEffect 挂钩查看状态，您应该会看到该值。 useEffect 挂钩在渲染后运行，因此您将在那时看到更新的状态信息。

useEffect(() => {
   console.log(title);
}, [title]);

【讨论】：