通过对象和数组的数组反应映射

Question

我有以下几点：const [channelAndReadsArray, setChannelAndReadsArray] = useState()var channelAndReads = []const requests = channels.map((currentChannel) => {    axios.get(serverRestAddress...                        .then((result) => {        var element = {}        element.channel = currentChannel;        element.reads = result;        channelAndReads.push(element);    })                    })Promise.all(requests).then(() => {    setChannelAndReadsArray(channelAndReads)});            ...if (!channelAndReadsArray) {    return null})channelAndReadsArray.map((channelAndReads) => {    console.log(channelAndReads)})这在控制台日志中给了我空值。我不确定这里有什么问题

Answer 1

为了Promise.all()工作，你需要从channels.map. 您可以返回每个元素，然后使用列表Promise.all来存储它们。

示例（未测试）：

const [channelAndReadsArray, setChannelAndReadsArray] = useState()

const requests = channels.map((currentChannel) =>

  axios.get(serverRestAddress)

  .then((result) => ({

    channel: currentChannel,

    reads: result

  }))

)

Promise.all(requests).then((elements) => {

  setChannelAndReadsArray(elements)

});

if (!channelAndReadsArray) {

  return null

})

channelAndReadsArray.map(console.log)

Answer 2

该request数组将是空的，因为您没有从 .map 返回任何内容，一种更简洁的方法可能是不使用异步代码推送到数组中

const [channelAndReadsArray, setChannelAndReadsArray] = useState();

const requests = channels.map(async (currentChannel) => {

           return axios.get(serverRestAddress...)

           .then((result) => {

                var element = {}

                element.channel= currentChannel;

                element.reads= result;

                return result;

             })

           });

Promise.all(requests).then((results) => { setChannelAndReadsArray(results)});

if (!channelAndReadsArray) {

     return null

});

channelAndReadsArray.map((channelAndReads)=>{

     console.log(channelAndReads)

});