Question

嘿ReactJs社区，

我对ReactJs很新，并且已经设置了我的第一个组件。现在，我想要更新特定事件的所有状态项。我通过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 回调hackery

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))
    })
}

来自异步回调

1 个答案: