如何将承诺转换为它持有的数组？

Question

我正在使用 React useReducer 并尝试显示从 firebase 获取的信息。

     async function reducer(listState, action) {
        switch (action.type) {
            case "load":
            let stateCopy2 = [...listState]; 
        let  result = await firebase.firestore().collection("contractors").doc(action.idList[0].id).get()
        console.log("non promise/ console log 1",result.data())
        return [...stateCopy2, result.data()]
        default:
            throw new Error();
        }
      }
    
      function Thing(props) {      
    
    
    return (
        <div >
              {listState.map((data, index) => (
    <div>
    {data.Bio}
    </div>
))}
    <button onClick={()=>console.log("promise/ console log 2", listState)}>check</button>
    </div>
    )
    }
    export default Thing;

在执行 console.log(listState) 时；在 console.log 1 处，信息显示了它应该显示的内容。应有尽有：

{BIo:"hello"}

at console.log 2 显示的信息是：

Promise {<fulfilled>: Array(2)}

其中显示原始信息。

转换后，由于 listState 是 promise，因此无法映射。

我如何将 promise 变成数组或者不让它像这样显示？

Answer 1

通过将你的 reducer 标记为 async，你就是在 return 一个 Promise。因此，您需要 await 它才能获得它的价值。

我有点惊讶 listState.map 调用没有在你身上爆炸，但我承认我并没有真正仔细地观察过，并且从你的代码中不清楚 listState 来自您的 Thing 组件。

对我来说，拥有一个异步减速器感觉就像 一个坏主意™，因为减速器的工作只是更新状态以响应一个动作。 Whosebug 上的其他地方可能会有帮助。

Answer 2

您可以声明一个 onClick AsyncFunction：

onClick={async () => console.log("promise/ console log 2", await listState)}

或者简单地在“then”方法中做一个控制台：

onClick={listState.then(data => console.log("promise/ console log 2", data))}

如何将承诺转换为它持有的数组？

How do I convert a promise into the array it holds?

async-await

firebase

reactjs

use-reducer