javascript - React 状态不会重新渲染

Question

请帮忙，我想问为什么 react 状态不重新渲染。

控制台显示更新后的状态，但不在渲染中。

我有类似的代码和相同的场景，这只是为了简化。

       import React, {useState} from "react";

       const [x, setX] = useState([1]);

       const Sample = () => {
        <div>
            hello
            <button onClick={async () => {
                tempX.push(1);
                console.log(tempX)
                await setX(tempX)

            }}>
              x
            </button>
            {x.map( function(z) {return z})}          
         </div>
       }

       export default Sample;

Answer 1

如果上次 setState 具有相同的值，useState 不会重新渲染。您正在改变数组，这就是重新渲染没有发生的原因。

并且 setState 不会返回 Promise，因此您不需要 async 和 wait。

创建新副本，然后使用扩展运算符调用 setX。

   import React, {useState} from "react";

   const [x, setX] = useState([1]);

   const Sample = () => {
    <div>
        hello
        <button onClick={() => {
            const updated = [...tempX, 1]; // create new copy of your array;
            console.log(updated)
            setX(updated)

        }}>
          x
        </button>
        {x.map( function(z) {return z})}          
     </div>
   }

   export default Sample;