React组件中点击按钮后Props数据意外更新的问题排查与修复

问题原因 #

你遇到的props data被意外更新的核心原因是引用赋值导致的原对象修改：
在searchItem函数中，let a = d只是将对象的引用赋值给了变量a，并没有创建新的对象实例。此时修改a.connectors = []，实际上是直接修改了res数组里的原对象；而res是通过useEffect从props的data赋值而来，res中的元素和data的元素指向同一个内存地址，最终就会意外修改到传入的props data。

另外还有个小问题：你的res用{}作为初始值，但后续对res调用了map方法（数组方法），所以初始值应该设为[]更合理。

修复方法 #

解决思路是创建原对象的拷贝，切断引用关系，根据对象的结构可以选择以下方式：

1. 浅拷贝（适用于无嵌套的简单对象）

使用扩展运算符或Object.assign创建新对象：

const DefaultTabGroup = ({data}) => {
    // 修正初始值为数组
    const [res , setRes] = useState([]);

    useEffect(() =>{
       setRes(data);
    },[data]);

    const searchItem = () =>{
        let transData = [];
        res.map((d) =>{
           // 用扩展运算符浅拷贝原对象
           let a = {...d};
           a.connectors = [];
           transData.push(a);
        });
    };

    // code.....
}
export default DefaultTabGroup;

2. 深拷贝（适用于有嵌套结构的复杂对象）

如果d内部还有嵌套对象，浅拷贝无法切断深层引用，可使用JSON.parse(JSON.stringify(d))（注意：该方法不支持函数、Symbol等特殊类型）：

const searchItem = () =>{
    let transData = [];
    res.map((d) =>{
       // 深拷贝原对象
       let a = JSON.parse(JSON.stringify(d));
       a.connectors = [];
       transData.push(a);
    });
};

内容的提问来源于stack exchange，提问作者SubrataG