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

我有变量

myinterval

和挂钩的

功能组件

内部，我更新并添加新值这个

myinterval

，就在

useffect

内部

但是在一个状态获得update

myinterval

后，我指的是我在功能组件内部初始化的值

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

功能应用程序（道具）{
const[name，setName]=useState（'Muhammad'）；
设myinterval=null；
useffect（（）=>{
myinterval=setInterval（（）=>{}，100）；
}, []);
常量打印=异步（）=>{
setName（“新名称”）；
console.log（myinterval）；
};
回喂；
}

现在您可以看到，当我单击打印功能时，第一次它不是空的，但第二次它是空的

这是因为

setName（'newname'）

，实际上在

setName（'newname'）之后，然后
myinterval
返回空值

我想要什么？

我希望
myinterval
变量应始终返回在
useffect
中重新初始化的值

根据我的需要，我不能在
函数应用程序（props）{}
之外声明我的
myinterval
变量

下面是一个我演示的非常简单的示例。

每次在每次渲染时运行

useEffect(()=>{
    myinterval = setInterval(()=> {}, 100);
}, []);

仅在装载时运行，将
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);

import React，{useState，useffect，usemo}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[name，setName]=useState（“穆罕默德”）；
const[timeout，setTimeout]=useState（“初始值”）；
useffect（（）=>{
setInterval（（）=>setTimeout（“新值”），3000；
}, []);
常量打印=异步（）=>{
设置名称（“设置名称”）；
console.log（超时）；
};
返回(
嘿
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

每次在每次渲染时运行

useEffect(()=>{
    myinterval = setInterval(()=> {}, 100);
}, []);

仅在装载时运行，将
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);

import React，{useState，useffect，usemo}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[name，setName]=useState（“穆罕默德”）；
const[timeout，setTimeout]=useState（“初始值”）；
useffect（（）=>{
setInterval（（）=>setTimeout（“新值”），3000；
}, []);
常量打印=异步（）=>{
设置名称（“设置名称”）；
console.log（超时）；
};
返回(
嘿
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
这将仅在第一次渲染时设置间隔，并在卸载时取消间隔

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

功能应用程序（道具）{
const[name，setName]=useState（'Muhammad'）；
const myInterval=useRef（空）
useffect（（）=>{
myInterval.current=setInterval（（）=>{}，100）；
return（）=>{
如果（myInterval.current）{
clearInterval（myInterval.current）
myInterval.current=null
}
}
}, []);
常量打印=异步（）=>{
setName（“新名称”）；
console.log（myInterval.current）；
};
回喂；
}
这将仅在第一次渲染时设置间隔，并在卸载时取消间隔

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

功能应用程序（道具）{
const[name，setName]=useState（'Muhammad'）；
const myInterval=useRef（空）
useffect（（）=>{
myInterval.current=setInterval（（）=>{}，100）；
return（）=>{
如果（myInterval.current）{
clearInterval（myInterval.current）
myInterval.current=null
}
}
}, []);
常量打印=异步（）=>{
setName（“新名称”）；
console.log（myInterval.current）；
};
回喂；
}