React组件重渲染时UI未更新：球员投标后按钮无法实时切换为“编辑投标”问题求助

Hey there! Let's break down why your button isn't updating in real-time and fix it.

The Root Cause #

Right now, when you submit a bid, you call props.onUpdate() which toggles the update state in UserPlayers—but this doesn't trigger a re-fetch of the bids (loadedOfertas) in your PlayerItem component. The useEffect in PlayerItem that fetches bids only runs when sendRequest or playerId changes, and neither of those are affected by the update state from the parent. So the loadedOfertas stays stale, and the button shows the old state until you refresh the page.

Solution 1: Pass the update state down to trigger a re-fetch #

This is a straightforward fix that leverages your existing update state to refresh the bids in PlayerItem:

1. Update UserPlayers to pass the update prop to PlayerList:
   In UserPlayers.js, modify the PlayerList component call:

   <PlayerList
     items={loadedPlayers}
     onDeletePlayer={playerDeletedHandler}
     onUpdate={updateHandler}
     update={update} {/* Add this line */}
   />
   

2. Pass the update prop from PlayerList to PlayerItem:
   In PlayerList.js, update the PlayerItem mapping:

   <PlayerItem
     key={player.id}
     id={player.id}
     image={player.image}
     title={player.title}
     clausula={player.clausula}
     address={player.address}
     creatorId={player.creator}
     Expires={player.Expires}
     ofertas={player.ofertas}
     onDelete={props.onDeletePlayer}
     onUpdate={props.onUpdate}
     update={props.update} {/* Add this line */}
   />
   

3. Add update as a dependency to the useEffect in PlayerItem:
   In PlayerItem.js, update the useEffect that fetches bids:

   useEffect(() => {
    const fetchOfertas = async () => {
     try {
      const responseData = await sendRequest(
       `http://localhost:5000/api/ofertas/player/${playerId}`
      );
      setLoadedOfertas(responseData.ofertas);
     } catch (err) {}
    };
    fetchOfertas();
   }, [sendRequest, playerId, props.update]); {/* Add props.update here */}
   

Now, every time you submit a bid and toggle the update state, the useEffect in PlayerItem will re-run, fetch the latest bids, and update the button text automatically.

Solution 2: Refresh bids immediately after submitting a bid #

If you don't want to rely on the parent's update state, you can re-fetch the bids right after the bid is successfully submitted:

In PlayerItem.js, modify the confirmOfertaHandler function:

const confirmOfertaHandler = async () => {
  setShowConfirmOfertaModal(false);
  try {
   await sendRequest(
    "http://localhost:5000/api/ofertas",
    "POST",
    JSON.stringify({
     cantidad: Number(formState.inputs.cantidad.value),
     ofertanteId: auth.userId,
     playerId: props.id,
     equipoOfertante: auth.userTeam,
     nombreOfertante: auth.userName,
     escudoOfertante: auth.userImage,
    }),
    { "Content-Type": "application/json" }
   );
   // Re-fetch the bids right after submitting
   const responseData = await sendRequest(
    `http://localhost:5000/api/ofertas/player/${playerId}`
   );
   setLoadedOfertas(responseData.ofertas);
   // props.onUpdate(); // You can remove this if you don't need to update the parent for other reasons
  } catch (err) {}
 };

This way, as soon as the bid is saved to the backend, you fetch the latest bids and update the local state, which makes the button switch to "EDITAR OFERTA" right away.

Bonus: Cleanup Tip #

Notice that you're fetching ofertas both in UserPlayers (as part of loadedPlayers) and again in PlayerItem. If the player.ofertas from the parent already contains all the bid data you need, you could skip the separate fetch in PlayerItem and just use props.ofertas directly. That would simplify your code and avoid redundant API calls!

For example, in PlayerItem.js, replace loadedOfertas with props.ofertas:

// Remove the useEffect that fetches loadedOfertas
// Replace loadedOfertas with props.ofertas in the button
<Button onClick={openOfertaHandler}>
 {props.ofertas && props.ofertas.filter(
  (oferta) => oferta.ofertanteId === auth.userId
 ).length > 0 ? "EDITAR OFERTA" : "HACER OFERTA"}
</Button>

Then, in UserPlayers, you'd need to make sure loadedPlayers gets updated with the new bid after submission (you could modify updateHandler to re-fetch loadedPlayers, or update the loadedPlayers state directly when a bid is submitted).

Either of the first two solutions will fix your immediate issue, so pick whichever fits your code style better!

内容的提问来源于stack exchange，提问作者doubting