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

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

console.log 2 显示的信息是：

Promise {<fulfilled>: Array(2)}

那里显示的原始信息。

在转换之后，因为 listState 是它不能被映射的承诺。

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

Answer 1

您可以声明一个 onClick AsyncFunction：

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

或者干脆在“then”方法中做一个控制台：

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

Answer 2

通过将你的 reducer 标记为 async，你正在让它返回一个 Promise。因此，您需要 await 来获取它的价值。

我有点惊讶listState.map 调用并没有对你造成影响，但我承认我并没有仔细观察，而且从你的代码中并不清楚listState 来自你的@ 987654326@组件。

在我看来，拥有一个异步 reducer 就像 A Bad Idea™，因为 reducer 的工作只是更新状态以响应一个动作。 stackoverflow 上的其他地方有 discussions of this 可能会有所帮助。