当React组件重新呈现时， UI不更新

Question

我有一个PlayerItem"组件，它是"PlayerList"组件，它又是"userplayer "的子组件。组件。UserPlayers组件包含一个函数，该函数可以通过"PlayerItem"组件来渲染UserPlayers组件。当我更新状态时，组件会正确呈现(每当我提交一个播放器的出价时)，但是有条件地设置为以一种方式显示的UI按钮直到我退出页面并重新进入时才会更新。我认为这是一个有点令人困惑的解释，我也不熟悉反应，所以我在这里附上一个问题的视频:

https://youtu.be/qQxSHuTbxXg

我想要实现的是，当我在播放器上出价时，它留在页面上，但按钮应该更改为"编辑出价"。

UserPlayers.js:

const UserPlayers = () => {
const [loadedPlayers, setLoadedPlayers] = useState();
const { isLoading, error, sendRequest, clearError } = useHttpClient();
const userId = useParams().userId;
const [update, setUpdate] = useState(false);
useEffect(() => {
const fetchPlayers = async () => {
try {
const responseData = await sendRequest(
`http://localhost:5000/api/players/user/${userId}`
);
setLoadedPlayers(responseData.players);
} catch (err) {}
};
fetchPlayers();
}, [sendRequest, userId]);
const playerDeletedHandler = (deletedPlayerId) => {
setLoadedPlayers((prevPlayers) =>
prevPlayers.filter((player) => player.id !== deletedPlayerId)
);
};
const updateHandler = () => {
if (update === false) {
setUpdate(true);
} else {
setUpdate(false);
}
};
return (
<React.Fragment>
<ErrorModal error={error} onClear={clearError} />
<Presupuesto></Presupuesto>
{isLoading && (
<div className="center">
<LoadingSpinner />
</div>
)}
{!isLoading && loadedPlayers && (
<PlayerList
items={loadedPlayers}
onDeletePlayer={playerDeletedHandler}
onUpdate={updateHandler}
/>
)}
</React.Fragment>
);
};
export default UserPlayers;

PlayerList.js:

const PlayerList = (props) => {
if (props.items.length === 0) {
return (
<div className="place-list center">
<Card>
<h2>Players not found</h2>
<Button to="/players/new">Share Player</Button>
</Card>
</div>
);
}
return (
<ul className="place-list">
{props.items.map((player) => (
<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}
></PlayerItem>
))}
</ul>
);
};

export default PlayerList;

PlayerItem.js:

const PlayerItem = (props) => {
const addingMiliseconds = 12096e5;
const ahora = Date.now();
const history = useHistory();
const playerId = props.id;
const [formState, inputHandler] = useForm(
{
cantidad: {
value: "",
isValid: false,
},
},
false
);
const { isLoading, error, sendRequest, clearError } = useHttpClient();
const auth = useContext(AuthContext);
const [loadedOfertas, setLoadedOfertas] = useState();
const [showConfirmOfertaModal, setShowConfirmOfertaModal] = useState(false);
const [showVerOfertasModal, setShowVerOfertasModal] = useState(false);
const [showSubirClausulaModal, setShowSubirClausulaModal] = useState(false);
const [showConfirmModal, setShowConfirmModal] = useState(false);
const [showConfirmClausulaModal, setShowConfirmClausulaModal] =
useState(false);
useEffect(() => {
const fetchOfertas = async () => {
try {
const responseData = await sendRequest(
`http://localhost:5000/api/ofertas/player/${playerId}`
);
setLoadedOfertas(responseData.ofertas);
} catch (err) {}
};
fetchOfertas();
}, [sendRequest, playerId]);
const openVerOfertasHandler = () => {
setShowVerOfertasModal(true);
};
const closeVerOfertasHandler = () => setShowVerOfertasModal(false);
const openOfertaHandler = () => setShowConfirmOfertaModal(true);
const cancelDeleteHandler = () => {
setShowConfirmModal(false);
};
const cancelOfertaHandler = () => {
setShowConfirmOfertaModal(false);
setShowSubirClausulaModal(false);
};
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" }
);
props.onUpdate();
//history.push("/");
} catch (err) {}
};
return (
<React.Fragment>
<ErrorModal error={error} onClear={clearError}></ErrorModal>
{auth.isLoggedIn && auth.userId !== props.creatorId && (
<Button onClick={openOfertaHandler}>
{loadedOfertas &&
loadedOfertas.filter(
(oferta) => oferta.ofertanteId === auth.userId
).length > 0
? "EDITAR OFERTA"
: "HACER OFERTA"}
</Button>
)}
</React.Fragment>
);
};
export default PlayerItem;

Answer 1

为了将来参考，我将在这里写下对你有效的答案。

缺失的一点是在确认模态时依赖于useEffect来重新获取信息。可能是这样的:

useEffect(() => {
const fetchOfertas = async () => {
try {
const responseData = await sendRequest(
`http://localhost:5000/api/ofertas/player/${playerId}`
);
setLoadedOfertas(responseData.ofertas);
} catch (err) {}
};
if (!!sendRequest && playerId && !showConfirmOfertaModal) {
fetchOfertas();
}
}, [sendRequest, playerId, showConfirmOfertaModal]);

问题是在POST添加报价后没有更新的信息。