Question

请帮助，我想问为什么反应状态不能重新呈现。

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

在相同的情况下，我有类似的代码，这只是为了简化。

       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，因此您不需要异步等待。

创建新副本，然后使用传播运算符调用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;

Answer 2

UseEffect -在第二个参数（在本例中为[x]更改）时重新呈现

我不相信这就是您所需要的：

<body>
    <section class="container">
        <div class="picture-container">
            <img src="https://i.picsum.photos/id/1/5616/3744.jpg" id="picture" height=50 width=50 alt="df">
        </div>
        <button id="btn-previous">Previous</button>
        <button id="btn-next">Next</button>
    </section>
    <script>
    var counter = 1;
    document.getElementById('btn-next').addEventListener('click',       nextImg);
     document.getElementById('btn-previous').addEventListener('click',preImg);

function nextImg() {
    counter++;
    document.getElementById('picture').src = 'https://i.picsum.photos/id/' + counter + '/5616/3744.jpg';
}
function preImg() {
    counter--;
    document.getElementById('picture').src = 'https://i.picsum.photos/id/' + counter + '/5616/3744.jpg';
}
    </script>
</body>

嘿，有人知道如何在 onClick 函数中依次添加数组元素（itemsToPush）吗？

反应状态不会重新呈现

2 个答案: