React使用useState初始化对象后，不能更新的原因之一及解决方法

2024-09-01

React自定义组件时，使用useState初始化值，如果用到当前文件中组件外的对象，一定要先克隆一份。

避免组件操作中引用状态值时，指向原来的对象，造成不正常的更新变化。

react_logo

参考示例：

import React, { useRef, useState, useEffect } from 'react';

const options = [
    { type: 'FORWARD', name: '正向', checked: true },
    { type: 'REVERSE', name: '反向' },
    { type: 'UNDIRECTED', name: '无向' },
    { type: 'BOTHWAY', name: '双向' },
]

const getOptions = (value) => {

    options.forEach(option => {
        option.checked = value.includes(option.type);
    })

    return options;
}

export default function DropDownList(props) {
    const [data, setData] = useState(getOptions([]));
   
    const onClick = e => {
        data.forEach(item => {
            item.checked = true;
        })

        setData([...data]);    
    }

    return (
        <>
            <div className={styles.wrap} onClick={onClick}>
            </div>
        </>
    )
}

其中，getOptions里面引用了options，而且onClick中用到了data，实际上这两个是同一个指针地址，setData不一定能正确更新。

最好克隆一份避免不必要的麻烦，如：

const getOptions = (value) => {
    const temp = JSON.parse(JSON.stringify( options ));

    temp.forEach(option => {
        option.checked = value.includes(option.type);
    })

    return temp;
}

（版权归cpury.com所有，转载请注明出处。）

WEB开发