如何从 map 中的 promise 设置 JS 变量？

Question

I'm working on Ionic 4 and React and I'm trying to get data from a function to return into the page, but i'm not able to get the data out of the promise.

FYI, i'm using the functional version/pattern of react.

participants.map(participant => {

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

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

});

I've tried using UseState which works somewhat, but I need it to work within the map, but I can't use useState within a React Hook.

Edit: I've tried async/await, but I get the following error when I do: Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Edit:

Here's the code for 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"
        })

    }

Btw, the purpose of returning "danger" or "success" is not to print exactly the text, but more to be used for styling an Ionic element. Apologies if my code is too misleading. I've edited to make it closer to what I actually need.

Answer 1

I also think your overall structure of your component is very error prone. Here is how i would attempt to do what you intend to do:

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

Hope this makes it a little easier to structure your component

Answer 2

when you call a Promise like fetchSelectedPaymentEvents and use the.then syntax, you are running fetchSelectedPaymentEvents synchronously instead of asynchronously. Therefore your return statement gets called before the.then.

YOu have to use the async await syntax to solve thi issue:

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>
    );

}));

try wrapping up your map function with promise.all() as you function as a parameter to this

Answer 4

Here is an approach that works, it looks a little different than yours, since i did it my way, but i hope this can help. Its confusing when using promises and pass them down and to figure out where and when to async and await, esspecially with React hooks. I recommend using the hooks for your state logic and flow as much as you can otherwise you your code can get error prone very easily.

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