如何從 map 中的 promise 設置 JS 變量？

Question

我正在研究 Ionic 4 和 React，我正在嘗試從 function 獲取數據以返回頁面，但我無法從 promise 中獲取數據。

僅供參考，我正在使用反應的功能版本/模式。

participants.map(participant => {

    var paymentStatus = false;
    fetchSelectedPaymentEvents(participant, selectedEvent)
      .then(data => { 
        paymentStatus = data;
      })

    return (
        <IonButton color={paymentStatus}>Button<IonButton>
    );

});

我嘗試過使用 UseState，它有點用，但我需要它在 map 中工作，但我不能在 React Hook 中使用 useState。

編輯：我嘗試過異步/等待，但是當我這樣做時出現以下錯誤：錯誤：對象作為 React 子級無效（找到：[object Promise]）。 如果您打算渲染一組子項，請改用數組。

編輯：

這是 fetchSelectedPaymentEvents() 的代碼：

function fetchSelectedPaymentEvents(participant_id: any, event_id: any) {

        return axios({
            url: "URL",
            method: "POST",
            data: {
                "participant_id": participant_id,
                "payment_event_id": event_id
            }
        }).then(response => {
            var data = response.data["payment_records"]

            if (data === undefined || data.length == 0) {
                return "danger"
            }

            return "success"
        })

    }

順便說一句，返回“危險”或“成功”的目的不是准確地打印文本，而是更多地用於設置 Ionic 元素的樣式。 如果我的代碼誤導性太強，我們深表歉意。 我進行了編輯以使其更接近我實際需要的內容。

Answer 1

我還認為您的組件的整體結構非常容易出錯。 以下是我將如何嘗試做你打算做的事情：

const Component = () => {
  const participants = // whereever you get participants from;
  return (
    <ul>
      {participants.map(participant => {
          return <Participant participant={participant} />
        })
      }
    </ul>
  )
}

const Participant = ({ participant }) => {
  const [paymentStatus, setPaymentStatus] = useState("//initialState?");

  useEffect(() => {
    fetchSelectedPaymentEvents(participant, selectedEvent) // dont where selectedEvent comes from?
      .then(data => { 
        setPaymentStatus(data);
      })
  }, [participant]}

  return (
    <li>
      {paymentStatus}
    </li>
  )
}

希望這可以使您的組件更容易構建

Answer 2

當您調用 Promise 之類的 fetchSelectedPaymentEvents 並使用 .then 語法時，您正在同步運行 fetchSelectedPaymentEvents 而不是異步運行。 因此，您的 return 語句在 the.then 之前被調用。

你必須使用異步等待語法來解決這個問題：

participants.map(async participant => {
    const paymentStatus = await fetchSelectedPaymentEvents(participant, selectedEvent);

    return (
        <IonText>{paymentStatus}<IonText>
    );
});

Answer 3

Promise.all(participants.map(participant => {

    var paymentStatus = false;
    fetchSelectedPaymentEvents(participant, selectedEvent)
      .then(data => { 
        paymentStatus = data;
      })

    return (
        <IonText>{paymentStatus}<IonText>
    );

}));

嘗試將 map function 與promise.all()作為 ZC1C425268E68385D1AB54 的參數

Answer 4

這是一種可行的方法，它看起來與您的方法有些不同，因為我是按照自己的方式進行的，但我希望這會有所幫助。 使用 Promise 並將它們傳遞下去並弄清楚何時何地進行異步和等待時會令人困惑，尤其是使用 React 鈎子時。 我建議為您的 state 邏輯和流程盡可能多地使用鈎子，否則您的代碼很容易出錯。

const fetchSelectedPaymentEvents = async (participant_id, event_id) => {
  try {
    const response = await axios({
      url: "URL",
      method: "POST",
      data: {
        participant_id: participant_id,
        payment_event_id: event_id
      }
    });
    var data = response.data["payment_records"];
    if (data === undefined || data.length == 0) {
      return "danger";
    }
    return "success";
  } catch (error) {
    return "failed";
  }
};

const App = () => {
  const [status, setStatus] = useState("pending");

  useEffect(() => {
    fetchSelectedPaymentEvents().then(data => setStatus(data));
  }, []);

  return <div className="App">{status}</div>;
};