Question

我需要映射到我状态下的数组，并将返回的值分配给我状态下的另一个属性。然后，我需要使用updated属性的值作为参数来调用一个函数，等待该函数完成，然后再继续执行我的数组映射方法中的下一项，然后重复该过程。

问题是我认为在通过arr.map方法的每次迭代更新状态之前，我的函数正在运行。

我认为我需要在运行函数之前利用componentDidUpdate（）方法，但是我不确定如何在这种情况下实现该功能。

更容易通过代码示例进行解释，请参见下文（为简化起见进行编辑）：

state = {
  a: [ {name: 'some string'}, {name: 'some string'}..... ],
  b: '' // empty string
}

// when button is clicked, this function is run
myFunc() {
  this.state.a.map( (item) => { 
    this.setState({
      b: item.name
    })
  mySecondFunc()// perform next part of the loop
  })
}

mySecondFunc() {
  alert( this.state.b )
}

mySecondFunc（）中的警报未返回任何内容，在运行该函数之前未对其进行更新。我需要做的是，映射将从状态“ a”数组中获取第一项，将其分配给状态“ b”，然后运行mySecondFunc（）。我需要等待状态更新，然后再调用mySecondFunc，然后等待mySecondFunc（）结束其功能，然后映射才会从状态的'a'数组中获取下一项并再次调用mySecondFunc。

这是我无法弄清的部分。

Answer 1

尝试

state = {
  a: [ {name: 'some string'}, {name: 'some string'}..... ],
  b: '' // empty string
}

// when button is clicked, this function is run
myFunc(){
 this.state.a.map(async(item) => { 
   await this.setState({
      b: item.name
    },async () => {
        await mySecondFunc()// perform next part of the loop
      })
  })
}

mySecondFunc() {
   alert( this.state.b )
}

//OR 

myFunc(){
 this.state.a.map(async(item) => { 
    await mySecondFunc(item)
  })
}

mySecondFunc(item) {
  alert( item )
}

Answer 2

从问题描述中我了解到的是，这里的目标是将b的值顺序传递给mySecondFunc。根据对问题的理解，我已经修改了您的代码：

myFunc() {

  this.state.a.map( (item) => {

        this.setState( (prevState) => {


            const modifiedName = item.name;

            this.mySecondFunc(modifiedName);

            return {
                b: modifiedName
            }

        });


    });


}
mySecondFunc(name) {
        alert( name );
}

将回调添加到从arr映射方法内部调用的函数中

2 个答案: