反应状态不会重新渲染

问题描述 投票:0回答:2

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

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

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

       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;
reactjs
2个回答
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;

0
投票

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)吗?

© www.soinside.com 2019 - 2024. All rights reserved.