React 状态不会重新渲染

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，因此您不需要 async 和 await。

创建新副本，然后使用扩展运算符调用 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] 改变）

我不相信这是你需要的：

import React, { useState, useEffect } from "react";


    const Sample = () => {

        const [x, setX] = useState([1]);
        const onClick = (push) => { setX([...x, push]); }

        const itemsToPush = [5, 2, 3, 4]

        useEffect(() => {
            console.log("X changed")
        }, [x])

        return (
            <div>
                hello
            <button onClick={() => onClick(itemsToPush)}>
                    {x}
                </button>
            </div >
        )
    }

    export default Sample;

---

嘿，有没有人知道如何在onClick函数中按顺序添加数组元素（itemsToPush）？