异步回调的ReactJS setState

Question

嘿ReactJs社区，

我对ReactJ相当陌生，并且已经设置了我的第一个组件。现在，我想更新特定事件上的所有状态项。我正在通过map()循环每个状态项，并调用一个异步方法来确定要包含在状态中的值。此方法通过回调函数返回GET数据。

updateItems: function() {
    var items = this.state.items;
    items.map(function(item, i) {
        checkConfirmation(item.hash, function(confirmations) {
            console.log("Item " + i + " has " + confirmations + " confirmations!");
            items[i].hash = item.hash + " (" + confirmations + ")";
            items[i].completed = true;
        });
    });
}

如何通过异步回调更新状态？

我尝试将this作为map()中的第二个参数传递，并尝试在map()函数之后调用setState，但这是行不通的，因为它将在回调中返回任何数据之前被调用。

谢谢你抽出时间来帮助我解决这个问题！

Answer 1

您可以对每个待决请求作出承诺。使用Promise.all等待他们的到来。并在完成所有请求时设置状态。

updateItems: function() {
    const items = this.state.items;

    const pending = items.map(item => new Promise(resolve => {
        checkConfirmation(item.hash, resolve)
    }))

    Promise.all(pending)
      .then(confirmations => confirmations.map((confirmation, i) => {
        const item = items[i]

        // copy items mutating state is bad
        return Object.assign({}, item, {
          completed: true,
          hash: `${item.hash}(${confirmation})`
        })
      }))
      .then(items => this.setState({ items })
}

UPD回调黑客

updateItems: function() {
    const items = this.state.items;
    let confirmations = []
    let loaded = 0

    const addConfirmation = i => confirmation => {
      confirmations[i] = confirmation
      loaded++;

      // if all were loaded
      if(loaded === items.length) allConfirmationsLoaded()
    }

    const allConfirmationsLoaded = () => {
        const newItems = confirmations.map((confirmation, i) => {
            const item = items[i]

            // copy items mutating state is bad
            return Object.assign({}, item, {
              completed: true,
              hash: `${item.hash}(${confirmation})`
            })
        })

        this.setState({items: newItems})
    }

    // for each item lauch checkConfirmation
    items.forEach((item, i) => {
      checkConfirmation(item.hash, addConfirmation(i))
    })
}