多个组件共用一个数据源,使用之后,其它组件不能再用

tech2023-02-17  89

实现:codesandbox

data = [{key: 1, value: 1}, {key: 2, value: 2}, {key: 3, value: 3}, ... {key: 10, value: 10}] unselected = _.cloneDeep(data) handleUnselected = (selected) => unselected.splice(unselected.findIndex(item => item.key === selected), 1) // 初始: Select A, Select B,Select C 都是: aData = _.cloneDeep(unselected) bData = _.cloneDeep(unselected) cData = _.cloneDeep(unselected) // 并且都监听 unselected // ---> Select A aSelected = key:2 // A 选择了 key:2 handleUnselected(aSelected) // unselected 中已删除了 key:2 aData = [aSelected, unselected] // A 包含 key:2 // Select B,Select C 中监听: bData = _.cloneDeep(unselected) // B 此时没有 (A)key:2 cData = _.cloneDeep(unselected) // C 此时没有 (A)key:2 // ---> Select B bSelected = key:3 // B 中选择了 key:3 handleUnselected(bSelected) // unselected 中已删除了 key:2,key:3 bData = [bSelected, unselected] // B 包含 key:3,但没有 (A)key:2 // Select A,Select C 中监听: aData = [aSelected, _.cloneDeep(unselected)] // 此时没有 (B)key:3 cData = _.cloneDeep(unselected) // 此时没有 (A)key:2,(B)key:3 // ---> Select C cSelected = key:4 // C 中选择了 key:4 handleUnselected(cSelected) // unselected 中已删除了 key:2,key:3,key:4 cData = [cSelected, unselected] // C 包含 key:4,但没有 (A)key:2 (B)key:3 // Select A,Select B 中监听: aData = [aSelected, _.cloneDeep(unselected)] // 此时没有 (B)key:3 (C)key:4 bData = [bSelected, _.cloneDeep(unselected)] // 此时没有 (A)key:2 (C)key:4
最新回复(0)