如何在函数组件中保存变量的值

Question

我有变量myinterval里面functional component有钩子，和我更新和ASIGN新价值这myinterval，只是里面useEffect。但是在状态获取更新后myinterval保存了 prev 值，我的意思是我在功能组件中初始化的值。function App(props) {  const [name, setName] = useState('Muhammad');  let myinterval = null;  useEffect(()=>{    myinterval = setInterval(()=> {}, 100);  }, []);  const print = async () => {    setName('new name');     console.log(myinterval);  };  return <button className="App" onClick={print}>hey</button>;}现在你可以看到，当我点击print function 时，第一次它不是空的，但第二次它是空的。这是因为setName('new name');，实际上在setName('new name');调用之后，然后myinterval返回空值。我想要的是？我希望myinterval变量应该始终返回在内部重新初始化的值useEffect。根据我的需要，我不能myinterval在function App(props){}.

Answer 1

这将仅在第一次渲染时设置间隔并在卸载时取消它

useEffect(()=>{

    myInterval = setInterval(()=> {}, 100);

    return () => clearInterval(myInterval)

  }, []);

}

如果要存储对间隔 id 的引用，则不应使用普通变量（在每次渲染时设置），而应使用带有 useRef 钩子的 React ref

function App(props) {

  const [name, setName] = useState('Muhammad');

  const myInterval = useRef(null)

  useEffect(()=>{

    myInterval.current = setInterval(()=> {}, 100);

    return () => {

      if (myInterval.current) { 

        clearInterval(myInterval.current)

        myInterval.current = null

      }

    }

  }, []);

  const print = async () => {

    setName('new name');

     console.log(myInterval.current);

  };

  return <button className="App" onClick={print}>hey</button>;

}

Answer 2

let myinterval = null;

每次都运行，每次渲染

useEffect(()=>{

    myinterval = setInterval(()=> {}, 100);

}, []);

只在 mount 上运行，留下myinterval一个null值

修复您想要实现的目标：

import React, { useState, useEffect, useMemo } from "react";

import ReactDOM from "react-dom";

import "./styles.css";

function App() {

  const [name, setName] = useState("Muhammad");

  const [timeout, setTimeout] = useState("init value");

  useEffect(() => {

    setInterval(() => setTimeout("new value"), 3000);

  }, []);

  const print = async () => {

    setName("setting name");

    console.log(timeout);

  };

  return (

    <button className="App" onClick={print}>

      hey

    </button>

  );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);