问 useImperativeHandle钩子不更新值

EN

useImperativeHandle需要让组件使用 forwardRef ，一旦这样做，您将能够访问父级中更新的ref，因为您提供 phone 作为它的依赖项。

import React, {
  useEffect,
  useState,
  useImperativeHandle,
  forwardRef,
  useRef
} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const App = forwardRef((props, ref) => {
  const [phone, setPhone] = useState("");
  useImperativeHandle(
    () => ({
      type: "text",
      name: "phone",
      value: phone
    [phone]
  useEffect(() => {
    setTimeout(() => {
      setPhone("9898098909");
    }, 3000);
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
const Parent = () => {
  const appRef = useRef(null);
  const handleClick = () => {
    console.log(appRef.current.value);
  return (
      <App ref={appRef} />
      <button onClick={handleClick}>Click</button>
const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

工作演示

如果您懒惰和/或优化在您的应用程序中还不是非常重要，您可以将 [{}] 的依赖项传递给 useImperativeHandle() ，以便每次组件重新呈现时进行更新，确保这些值始终是最新的。

const App = forwardRef((props, ref) => {
  const [phone, setPhone] = useState("");
  useImperativeHandle(
    () => ({
      type: "text",