能够更新setstate item的数据

example/AddRemove/index.tsx

@@ -1,5 +1,5 @@
-import *as React from 'react';
-import { Dragact } from '../../src/lib/dragact';
+import * as React from 'react'
+import { Dragact } from '../../src/lib/dragact'
 
 const Words = [
     { content: 'You can do anything, but not everything.' },
@@ -9,32 +9,46 @@ const Words = [
     { content: 'I’d rather live with a good question than a bad answer.' }
 ]
 
-
 const Card = ({ item, provided, onDelete }: any) => {
     return (
         <div
-            className='layout-Item'
+            className="layout-Item"
             {...provided.props}
             {...provided.dragHandle}
         >
             <div
                 style={{
                     position: 'absolute',
-                    width: 10, height: 10, right: 15, top: 5, cursor: 'pointer'
+                    width: 10,
+                    height: 10,
+                    right: 15,
+                    top: 5,
+                    cursor: 'pointer'
                 }}
                 onClick={() => onDelete(item.key)}
-            >❌</div>
-            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>{item.content}</div>
+            >
+                ❌
+            </div>
+            <div style={{ padding: 5, textAlign: 'center', color: '#595959' }}>
+                {item.content}
+            </div>
         </div>
     )
 }
 
 const fakeData = () => {
-    var Y = 0;
+    var Y = 0
     return Words.map((item, index) => {
-        if (index % 4 === 0) Y++;
+        if (index % 4 === 0) Y++
 
-        return { ...item, GridX: index % 4 * 4, GridY: Y * 4, w: 4, h: 3, key: index }
+        return {
+            ...item,
+            GridX: (index % 4) * 4,
+            GridY: Y * 4,
+            w: 4,
+            h: 3,
+            key: index
+        }
     })
 }
 
@@ -42,25 +56,24 @@ const makeOne = () => {
     return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() }
 }
 
-
 export class AddRemove extends React.Component<{}, {}> {
     state = {
         layout: fakeData()
     }
 
-    componentDidMount() {
-
-    }
+    componentDidMount() {}
     handleClick = () => {
+        const change = this.state.layout.map(item => {
+            return { ...item, content: '21312' }
+        })
         this.setState({
-            layout: [...this.state.layout, makeOne()]
+            layout: [...change, makeOne()]
         })
-        console.log(this.state.layout)
     }
     hanldeOnDelete = (key: any) => {
-        const layout = this.state.layout.filter((item) => {
+        const layout = this.state.layout.filter(item => {
             if (item.key !== key) {
-                return item;
+                return item
             }
         })
         this.setState({
@@ -69,7 +82,7 @@ export class AddRemove extends React.Component<{}, {}> {
     }
 
     render() {
-        const margin: [number, number] = [5, 5];
+        const margin: [number, number] = [5, 5]
         const dragactInit = {
             width: 600,
             col: 12,
@@ -81,14 +94,20 @@ export class AddRemove extends React.Component<{}, {}> {
         }
         return (
             <div>
-                <div style={{ display: 'flex', justifyContent: 'center' }} >
+                <div style={{ display: 'flex', justifyContent: 'center' }}>
                     <div>
-
                         <h1 style={{ textAlign: 'center' }}>AddRemove Demo</h1>
+                        <h3 style={{ textAlign: 'center' }}>在这个布局中，新增一个布局，会新加入一个布局</h3>
                         <button onClick={this.handleClick}>新增</button>
-                        <Dragact {...dragactInit} >
+                        <Dragact {...dragactInit}>
                             {(item, provided) => {
-                                return <Card item={item} provided={provided} onDelete={this.hanldeOnDelete} />
+                                return (
+                                    <Card
+                                        item={item}
+                                        provided={provided}
+                                        onDelete={this.hanldeOnDelete}
+                                    />
+                                )
                             }}
                         </Dragact>
                     </div>

src/lib/dragact.tsx

@@ -252,16 +252,20 @@ export class Dragact extends React.Component<DragactProps, DragactState> {
                 if (copyed[v.key]) {
                     return {
                         ...v,
-                        ...copyed[v.key]
+                        GridX:copyed[v.key].GridX,
+                        GridY:copyed[v.key].GridY,
+                        w:copyed[v.key].w,
+                        h:copyed[v.key].h,
+                        key:copyed[v.key].key
                     }
                 }
+
                 return {
                     ...v,
                     isUserMove: false,
                     key: v.key + ''
                 }
             })
-
             const { compacted, mapLayout } = compactLayout(
                 newLayout,
                 undefined,

src/lib/gridItem.tsx

@@ -134,15 +134,22 @@ export default class GridItem extends React.Component<GridItemProps, {}> {
 
     shouldComponentUpdate(props: GridItemProps, state: any) {
 
-        return this.props.GridX !== props.GridX ||
-            this.props.GridY !== props.GridY ||
-            this.props.isUserMove !== props.isUserMove ||
-            this.props.w !== props.w ||
-            this.props.h !== props.h ||
-            this.props.containerWidth !== props.containerWidth ||
-            this.props.col !== props.col ||
-            this.props.rowHeight !== this.props.rowHeight
-
+        let isUpdate = false
+        Object.keys(props).forEach((key)=>{
+            if((props as any)[key] !== (this.props as any)[key]){
+                isUpdate = true
+            }
+        })
+        return isUpdate
+
+        // return this.props.GridX !== props.GridX ||
+        //     this.props.GridY !== props.GridY ||
+        //     this.props.isUserMove !== props.isUserMove ||
+        //     this.props.w !== props.w ||
+        //     this.props.h !== props.h ||
+        //     this.props.containerWidth !== props.containerWidth ||
+        //     this.props.col !== props.col ||
+        //     this.props.rowHeight !== props.rowHeight
     }
 
     /**宽和高计算成为px */

src/lib/util/compact.ts

@@ -58,8 +58,8 @@ export const compactLayout = function () {
         const needCompact = Array(layout.length)
         const compareList = []
         const mapLayout: mapLayout = {};
-
-
+        
+        
         for (let i = 0, length = sorted.length; i < length; i++) {
             let finished = compactItem(compareList, sorted[i])
             if (movingItem) {
@@ -76,6 +76,7 @@ export const compactLayout = function () {
             needCompact[i] = finished
             mapLayout[finished.key + ''] = finished;
         }
+        
         return {
             compacted: needCompact,
             mapLayout