如何从 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>;
};