Хук useImperativeHandle не обновляет значение - PullRequest
Новая
       12

Хук useImperativeHandle не обновляет значение

0 голосов
/ 26 мая 2019

Я использую ловушку useImperativeHandle в своем приложении, чтобы предоставить доступ к значению родительскому компоненту: 

const [phone,setPhone]=useState("");
 useImperativeHandle(
    ref,
    () => ({
      type: "text",
      name: "phone",
      value: phone
    }),
    [phone]
  );

Когда я обновляю телефон с помощью setPhone, значение не будет обновляться. В чем проблема с моей реализацией?

1 Ответ

2 голосов
/ 27 мая 2019

useImperativeHandle необходимо, чтобы компонент использовал forwardRef. Как только вы это сделаете, вы сможете получить доступ к обновленной ссылке в родительском элементе, поскольку вы предоставляете 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(
    ref,
    () => ({
      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>
    </div>
  );
});

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

Рабочая демоверсия

...