react.js 中的状态渲染

Question

我有一个很简单的问题一直困扰着我。我对反应和状态问题比较陌生。如果我有一个创建如下状态变量的组件

const [state, setState] = useState(null)

然后让我做这样的代码...

setState(50)

更改状态会强制重新渲染，从而将状态变量重新初始化为 null。我究竟做错了什么？我希望应用程序在状态更改时重新呈现，并在此示例中将状态保留为 50，但是当它重新呈现时，它会将状态重新初始化为 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>

如果你这样做，这将以过多的重新渲染而告终，因为在状态更新之后，组件函数将被再次调用并再次更新状态，然后再次调用自身等等 -> loop

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

  setState(50);

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

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

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>

react.js 中的状态渲染

state rendering in react.js

reactjs

use-state