React状态更新问题

Question

我尝试在状态中添加新的数组和值。我正在使用react-beautiful dnd来显示这个状态数据。

我的初始状态：

 const initialData = {
            users: {
                'user-1': { id: 'user-1', name: 'John'},
                'user-2': { id: 'user-2', name: 'Patrick'},
                'user-3': { id: 'user-3', name: 'Malorie'},
                'user-4': { id: 'user-4', name: 'Eric'},
                'user-5': { id: 'user-5', name: 'Bob'},
                'user-6': { id: 'user-6', name: 'Blob'}
            },
            areas: {
                'area-0': {
                    id: 'area-0',
                    title: 'Main Area',
                    userIds: ['user-1', 'user-2','user-3', 'user-4','user-5', 'user-6']
                },
                'area-1': {
                    id: 'area-1',
                    title: 'Area 1',
                    userIds: []
                },
                'area-2': {
                    id: 'area-2',
                    title: 'Area 2',
                    userIds: []
                }
            },
            areaOrder: ['area-0','area-1', 'area-2'],
        }
 
 class MyClass {
 constructor() {
    super();
    this.state = {
        data: initialData,
      }
   }
 ...
 }

我有一个下拉菜单来选择我想要显示的区域的总数，当我触发它时，我会尝试在' areas‘数组和'areOrder’数组中添加新的区域。如果我再次更新区域的数量，我需要将状态重置为'initialData‘。

MyClass中的代码：

 // apply is triggered by the dropdown menu
 apply = (numOfAreas) => {
     // clear state to initial data
     this.setState({
        data: initialData
    })
 
    for (let i = 3; i <= numOfBOR; i++ ) {
        this.addNewArea(i);
    }
 }
 
 addNewArea = (newRoomId) => {
    const areas = { ...this.state.data.areas };
    let p = "area-";
    let key = newAreaId;
    const newAreaKey = p.concat(key);
    const areaTitle = "Area ".concat(newAreaId);

    let obj = [];
    obj[newAreaKey] = { id: newAreaKey, title: areaTitle, userIds: [] };

    const currentAreas = { ...areas };
    const newAreaObj = Object.assign(currentAreas, obj);

    const newState = {
      ...this.state.data,
      areas: newAreaObj,
      areaOrder: [...this.state.data.areaOrder, newAreaKey]
    };
    this.setState({data: newState});
  };

当我使用上面的代码时，只显示最后一个区域(即当我选择8个区域时，区域8显示在区域2之后)我知道setState是异步的，所以我想知道哪种方法可以让我做我想做的事情。

Answer 1

在本例中，setState不使用以前的状态，因此每个setState都将areas更改为其初始值加上一个新元素。您可以使用this.setState(prevState => newState)来获取以前的状态。