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

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所有,转载请注明出处。)