javascript - ReactGridLayout：ReactGridLayout.children[0].x 必须是数字

Question

我为我删除的网格设置列表添加，然后将其存储到列表数据中，它以前可以工作，但是当我现在尝试添加但出​​现此错误时。ReactGridLayout：ReactGridLayout.children[0].x 必须是数字！

 listAdd(x){

        let addItems = [...this.state.addItems];
        let items = [...this.state.items];

        items.push(x)
        addItems.splice(addItems.indexOf(x),1)
        console.log(items, 'uitems');
        console.log(addItems, 'items')
        this.setState({
            items: items,
            addItems: addItems
        })
    }

getInput(key){
        //let ls = {};
        let value = localStorage.getItem("layoutsJR") || {};
        //ls = JSON.parse(localStorage.getItem("layoutsJR")) || {};
        try{
            //parse localstorage string dan set state
            value = JSON.parse(value)
            this.setState({
            [key]: value
            })
        }catch(e){
            //handle empty string
            this.setState({
            [key]: value
            })
        }
        //console.log(value[key], "get inputan move")
        return value[key]


        // return ls[key];
    }

    updateInput(key, value){
        this.setState({
            [key] : value
        })

        localStorage.setItem(key, JSON.stringify({[key]: value}))
    }

onRemoveItem(i){

        let addItems = [...this.state.addItems];
        let items = [...this.state.items];
        addItems.push(items[i]);
        items.splice(i, 1);
        this.setState({
            addItems : addItems,
            items :items
        })
    }

 class AddRemoveLayout extends React.Component{
    // static get defaultProps() {
    //     return {
    //     className: "layout",
    //     cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
    //     rowHeight: 100,
    //     onLayoutChange: function(){}
    //     }
    // };

    constructor(props){
        super(props);

        this.state={
            itemsDefault :[0, 1, 2, 3, 4, 5].map(function(i){
                return{
                    i: i.toString(),
                    x: i*2,
                    y: 2,
                    w: 3,
                    h: 3
                };
            }),
            items: [0, 1, 2, 3, 4, 5].map(function(i){
                return{
                    i: i.toString(),
                    x: i*2,
                    y: 2,
                    w: 3,
                    h: 3
                };
            }),
            addItems:[],
            fullScreen: true,
            tempSisa: null,
            addItemsSisa: [],
            quantity:"",
            showWidget: false,
            isChecked: true,
            product: '',
            layouts: JSON.parse(JSON.stringify(this.getInput("layoutsJR")|| []))

        };

render(){
        let items = this.state.items;
        let addItems = this.state.addItems;

        return(
            <div>
                {this.state.fullScreen ? 
                    <div class="buttonMenu">


                <Dropdown class="dropdownList">
                    <Dropdown.Toggle variant="success" id="dropdown-basic">
                        List Add
                    </Dropdown.Toggle>

                    <Dropdown.Menu>
                      {addItems.map((index) =>{
                          return <Dropdown.Item key={index} onClick={this.listAdd.bind(this, index)}>{index.i}</Dropdown.Item>
                      })}
                    </Dropdown.Menu>
                </Dropdown></div> : <div></div>}

                <ResponsiveReactGridLayout

                    className="layout"
                    cols={{lg: 12, md:10, sm:6, xs:4, xxs:2}}
                    rowHeight={30}
                    layouts={this.state.layouts} 
                    onLayoutChange={(layout, layouts)=>this.onLayoutChange(layout, layouts)} 
                    onBreakpointChange={this.onBreakpointChange} 

                >{_.map(this.state.items, (el, index) => {return this.createElement(el, index)})
                /*this.state.items.map((el, index) => {
                    return this.createElement(el, index)
                })*/
                }
                </ResponsiveReactGridLayout>
            </div>
        );
    }
}

在我在网格布局中添加表格之前它的工作原理，但后来我收到了这个错误 ReactGridLayout: ReactGridLayout.children[0].x must be a number！