反应挂钩 useState 与数组导致缺少渲染调用

Question

我有以下代码：

function MyComponent( props ) {
    let arrSize = 5;
    const [arr, setArr] = useState( () => {
        let initial = new Array(arrSize);
        for(let i=0; i<arrSize; i++) initial.push({ foo: 'foo', bar: 'bar'});
        return initial;
    });

    mouseEventCallback = (e) => {
        // ...
        let tmp = arr;
        // ...
        setArr( tmp );
    }

    let cmp = [];
    for(let i=0; i<arrSize; i++) {  
       cmp.push( <span key={i} className={arr[i].foo}></span> );
    }

    return (
        <div>
           {cmp}
        </div>
    )
}

当鼠标回调调用几次时，我遇到了一个问题：状态参数更改正常（在 Chrome 带有反应组件的网络浏览器中检查选项卡），但是 DOM 具有此状态的元素没有全部重新渲染 - 其中一些具有旧状态。

当我添加虚拟状态时 - 一切正常：

function MyComponent( props ) {
    let arrSize = 5;
    const [arr, setArr] = useState( () => {
        let initial = new Array(arrSize);
        for(let i=0; i<arrSize; i++) initial.push({ foo: 'foo', bar: 'bar'});
        return initial;
    });
    const [dummy, setDummy] = useState(0);

    mouseEventCallback = (e) => {
        // ...
        let tmp = arr;
        // ...
        setArr( tmp );
        setDummy( Math.rand() );
    }

    let cmp = [];
    for(let i=0; i<arrSize; i++) {  
       cmp.push( <span key={i} className={arr[i].foo}></span> );
    }

    return (
        <div dataTest={dummy}>
           {cmp}
        </div>
    )
}

我如何改进我的代码并以正确的方式解决我的问题？

Answer 1

您的组件不会在 setArr(tmp) 上重新呈现，因为 "tmp" 变量引用与 "arr" 变量相同的数组。相同的引用意味着它们在内存中指向相同的东西，所以当 react 在旧状态和新状态之间进行比较时，它们 return 相同的东西，即 tmp === arr returns true。如果旧状态=新状态组件不重新渲染。所以为了重新渲染；使 "tmp" 指向一个与 "arr" 具有相同数据的新数组。您可以使用 ES6 扩展运算符。

更改：让 tmp = arr；至：让 tmp = [...arr];

let a = [1, 2, 3];
let b = a;
let c = [...a]; // ES6 Spread Operator

a === b; // returns true
a === c; // returns false

正确代码：

function MyComponent( props ) {
    let arrSize = 5;
    const [arr, setArr] = useState( () => {
        let initial = new Array(arrSize);
        for(let i=0; i<arrSize; i++) initial.push({ foo: 'foo', bar: 'bar'});
        return initial;
    });

    mouseEventCallback = (e) => {
        // ...
        let tmp = [...arr];
        // ...
        setArr( tmp );
    }

    let cmp = [];
    for(let i=0; i<arrSize; i++) {  
        cmp.push( <span key={i} className={arr[i].foo}></span> );
    }

    return (
        <div>
            {cmp}
        </div>
    )
}

反应挂钩 useState 与数组导致缺少渲染调用

React hook useState with array cause missing render calls

javascript

reactjs

mouseevent

react-hooks

react-functional-component