我有以下组件:

import React from "react"; 
import ReactDOM from "react-dom"; 
import { WidthProvider, Responsive } from "react-grid-layout"; 
import _ from "lodash"; 
const ResponsiveReactGridLayout = WidthProvider(Responsive); 
const originalLayout = getFromLS("layout") || []; 
 
/** 
 * This layout demonstrates how to use a grid with a dynamic number of elements. 
 */ 
class AddRemoveLayout extends React.PureComponent { 
  static defaultProps = { 
    className: "layout", 
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }, 
    rowHeight: 100, 
    onLayoutChange: function(){} 
  }; 
 
  constructor(props) { 
    super(props); 
 
    this.state = { 
      items: originalLayout.map((i, key, list) => { 
        return { 
          i: i.i.toString(), 
          x: i.x, 
          y: i.y, 
          w: i.w, 
          h: i.h, 
          add: i.i === (list.length - 1).toString() 
        }; 
      }), 
      newCounter: 0, 
      layout: JSON.parse(JSON.stringify(originalLayout)) 
    }; 
 
    this.onAddItem = this.onAddItem.bind(this); 
    this.onBreakpointChange = this.onBreakpointChange.bind(this); 
    this.onLayoutChange = this.onLayoutChange.bind(this); 
 
    this.widgetID = []; 
  } 
 
 
  onAddItem(layout) { 
    this.widgetID.length === 0 ? console.log('empty') : console.log("n" + (this.widgetID.slice(-1)[0] + this.state.newCounter)) 
        // this.setState({ 
        // // Add a new item. It must have a unique key! 
        //   items: this.state.items.concat({ 
        //     i: "n" + this.state.newCounter, 
        //     x: (this.state.items.length * 2) % (this.state.cols || 12), 
        //     y: Infinity, // puts it at the bottom 
        //     w: 2, 
        //     h: 2 
        //   }), 
        //   // Increment the counter to ensure key is always unique. 
        //   newCounter: this.state.newCounter + 1 
        // }) 
 
 
        // this.setState({ 
        // // Add a new item. It must have a unique key! 
        //   items: this.state.items.concat({ 
        //     i: "n" + (this.widgetID.slice(-1)[0] + this.state.newCounter), 
        //     x: (this.state.items.length * 2) % (this.state.cols || 12), 
        //     y: Infinity, // puts it at the bottom 
        //     w: 2, 
        //     h: 2 
        //   }), 
        //   // Increment the counter to ensure key is always unique. 
        //   newCounter: this.state.newCounter + 1 
        // }} 
    this.setState({ 
      newCounter: this.state.newCounter + 1 
    }) 
 
    this.widgetID.push(this.state.newCounter); 
 
    saveToLS("widget-id", this.widgetID, 'widget-id'); 
  } 
 
  render() {   
    return ( 
      <div> 
        <button onClick={this.onAddItem}>Add Item</button> 
        <ResponsiveReactGridLayout 
          onLayoutChange={(layout) => 
            this.onLayoutChange(layout) 
          } 
        > 
          {_.map(this.state.items, el => this.createElement(el))} 
        </ResponsiveReactGridLayout> 
      </div> 
    ); 
  } 
} 
 
function saveToLS(key, value, item) { 
  if (global.localStorage) { 
    global.localStorage.setItem( 
      item, 
      JSON.stringify({ 
        [key]: value 
      }) 
    ); 
  } 
} 
 
function getFromLS(key) { 
  let ls = {}; 
  if (global.localStorage) { 
    try { 
      ls = JSON.parse(global.localStorage.getItem("layout")) || {}; 
    } catch (e) { 
      /*Ignore*/ 
    } 
  } 
  return ls[key]; 
} 
 
export default AddRemoveLayout; 

在“onAddItem”函数中我有:

this.widgetID.length === 0 ? console.log('empty') : console.log("n" + (this.widgetID.slice(-1)[0] + this.state.newCounter)) 

如果这是真的

this.widgetID.length === 0 

我希望这样的事情发生:

    // this.setState({ 
    // // Add a new item. It must have a unique key! 
    //   items: this.state.items.concat({ 
    //     i: "n" + this.state.newCounter, 
    //     x: (this.state.items.length * 2) % (this.state.cols || 12), 
    //     y: Infinity, // puts it at the bottom 
    //     w: 2, 
    //     h: 2 
    //   }), 
    //   // Increment the counter to ensure key is always unique. 
    //   newCounter: this.state.newCounter + 1 
    // }) 

否则我希望计数器从内部的最后一个值开始

this.widgetID 

如果“this.widgetID”的最后一个值为 6，则计数应从 6 开始，以便我们得到 7,8,9。我已经尝试过，但没有运气:

    // this.setState({ 
    // // Add a new item. It must have a unique key! 
    //   items: this.state.items.concat({ 
    //     i: "n" + (this.widgetID.slice(-1)[0] + this.state.newCounter), 
    //     x: (this.state.items.length * 2) % (this.state.cols || 12), 
    //     y: Infinity, // puts it at the bottom 
    //     w: 2, 
    //     h: 2 
    //   }), 
    //   // Increment the counter to ensure key is always unique. 
    //   newCounter: this.state.newCounter + 1 
    // }} 

我正在向页面添加小部件，每个小部件都必须有一个唯一的 ID。我将所有添加内容保存到本地存储中，以便可以检索最后一个 id 并从那里开始计数，否则会出现错误

请您参考如下方法:

当你 setState考虑到之前的状态，正确的方法是传递 updater 函数(而不是新的状态对象，就像您所做的那样):

setState(updater[, callback])

更新器函数在哪里:

(prevState, props) => stateChange

考虑到这一点，我会尝试以下操作:

this.setState((prevState, props) => ({ 
  // Add a new item. It must have a unique key! 
  items: prevState.items.concat({ 
    i: "n" + prevState.newCounter, 
    x: (prevState.items.length * 2) % (prevState.cols || 12), 
    y: Infinity, // puts it at the bottom 
    w: 2, 
    h: 2 
  }), 
  // Increment the counter to ensure key is always unique. 
  newCounter: prevState.newCounter + 1 
})) 

这样，您的组件的状态就不会因批量状态更新而不同步。