React.js setState 没有通过 onclick 获得更新答案

【问题标题】：React.js setState not getting update wiith onclickReact.js setState 没有通过 onclick 获得更新
【发布时间】：2020-10-17 22:32:19
【问题描述】：

这是我的示例代码，它非常基本，我只想在单击提交后控制台 fname。当我第一次按下时，我得到一个空行，但是当我第二次按下按钮时，我得到一些空值。我附上控制台的屏幕截图。

我不想将我的代码更改为一个类并使用某种方法来获取控制台中的值。

screenshot for console output

import React,{useState} from 'react'

export const anyComponent = () => {
const [fname, setFname] = useState('')

const submit = (event) =>{
    setFname({fname: [event.target.value] })
    console.log(fname)
}
return(
<div>
    <input name="fname"  type="text" placeholder="Enter your First Name" />
    <button onClick={submit}>Submit</button>

</div>

)
}

【问题讨论】：

标签： reactjs onclick use-state

【解决方案1】：

来自 MDN 文档：

Event 接口的target 属性是对事件被调度到的对象的引用。

在您的情况下， event.target 将指向按钮而不是输入。

你需要的是输入的引用，你可以像这样使用useRef钩子

import React, { useState, useRef } from "react";

export default anyComponent = () => {
  const inputEl = useRef(null);
  const [fname, setFname] = useState("");

  const submit = event => {
    setFname({ fname: [inputEl.current.value] });
  };

  console.log(fname);
  return (
    <div>
      <input
        name="fname"
        ref={inputEl}
        type="text"
        placeholder="Enter your First Name"
      />
      <button onClick={submit}>Submit</button>
    </div>
  );
};

另外，setState 是异步的，这就是为什么您在调用setFname 之后不会在控制台中看到结果。但是您会在下次渲染时在控制台中看到更新后的fName，这就是我将其移出submit 的原因。

没有 useRef

或者，您可以在输入中添加onChange 处理程序并从那里更新状态fname

function App(){
  const [fname, setFname] = useState("");

  const submit = () => {
    console.log(fname);
  };

  const handleChange = ev => {
   setFname({ fname: [ev.target.value] });
  }

  return (
    <div>
      <input
        name="fname"
        onChange={handleChange}
        type="text"
        placeholder="Enter your First Name"
      />
      <button onClick={submit}>Submit</button>
    </div>
  );
};

【讨论】：

如果我在输入 fname 中使用 onChange 而不是 onClick 会发生什么？它可以引用我的输入字段吗？不使用 useRef 有办法吗？
是的，你是对的，你可以做到。我已经更新了答案以显示它是如何完成的。
如果我将 console.log 移到提交之外，即使没有使用 useRef，我也得到了答案。但是感谢这个 useRef 我不知道。

【解决方案2】：

您的控制台日志应该在提交方法之外。或者登录 event.target.value 而不是 fname。

【讨论】：