state 在 react.js 中渲染

Question

我有一个非常简单的问题一直困扰着我。 我对 state 的反应和问题比较陌生。 如果我有一个创建 state 变量的组件，如下所示

const [state, setState] = useState(null)

并让我做这样的代码......

setState(50)

更改 state 会强制重新渲染，从而将 state 变量重新初始化为 null。 我究竟做错了什么？ I want the app the re-render when state changes and leave state as 50 in this example but when it re-renders it re-initializes the state as null. 超级奇怪。

实际代码...

const ConnectBackend = props => {
    const [moisture, setMoisture] = useState(null)

    let temp = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var i = 0;
    function myLoop() {
        setTimeout(function() {
            setMoisture(temp[i]);
            console.log(moisture)
            i++;
            if (i < 10) {
                myLoop();
            }
        }, 3000)
    }
  
    myLoop(); 
}

Answer 1

你在哪里使用 setState？ 如果你这样做，那应该不是问题。

 const App = () => { const [state, setState] = React.useState(null) React.useEffect(() => { setState(50); }, []); return <p>{state}</p> } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <div id="root"></div>

如果你这样做，这将导致太多的重新渲染，因为在 state 更新组件 function 将再次被调用并更新 state 之后再次调用自身，然后再次调用自身

// DO NOT DO THIS
const App = () => {
  const [state, setState] = useState(null);

  setState(50);

  return <p>Hello CodeSandbox</p>;
}

更新：阅读您的评论和更新的代码后。 您可能希望采用更被动的方式来处理此问题。 Go 看看这个

 const { useEffect, useState, useMemo } = React; let temp = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const ConnectBackend = (props) => { const [i, setI] = useState(0); const [myInterval, setMyInterval] = useState(); const moisture = useMemo(() => temp[i], [i]); useEffect(() => { const interval = setInterval(() => { setI((oldI) => oldI + 1); }, 1000); setMyInterval(interval); return () => { clearInterval(interval); }; }, []); useEffect(() => { if (i > 8) clearInterval(myInterval); }, [myInterval, i]); return <p>{moisture}</p>; }; ReactDOM.render(<ConnectBackend />, document.getElementById("root"));

 <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script> <div id="root"></div>