javascript - React 组件没有根据异步调用的响应进行更新

Question

我的应用页面侧面有一张组件卡，显示用户当前的健身轨迹：

当页面加载时，轨道的名称是空白的，因为它还没有从服务器加载。但是，我希望它会在返回结果后立即更新组件并重新渲染。同样，当您单击组件的箭头时，会弹出一个模式，询问您是否准备好前进到下一个曲目。如果您确认，它会调用一个switchTrack()调用 API 的函数，如果结果成功，则更新用户并关闭模式。但是，即使轨道实际上已更新，轨道名称也不会刷新，直到您刷新页面。当结果返回时，如何确保该组件使用新文本重新呈现？（注意：您会看到我试图通过重新加载状态强制执行此操作，但这没有奏效）。

组件卡（简化）：

const CurrentPlanCard = props => {
  const { open, launchModal, closeModal } = useModal(false);
  const { user } = useSelector(mapState);
  const [currentTrackName, setCurrentTrackName] = useState('');
  const [nextTrackName, setNextTrackName] = useState('');
  const [nextTrackId, setNextTrackId] = useState('');
  const [reload, setReload] = useState(false);

  useEffect(() => {
    if (user) {
      getTrack(user.fitnessTrack)
        .then(currentTrack => {
          setCurrentTrackName(currentTrack.name);
          setNextTrackName(currentTrack?.nextTrack.name);
          setNextTrackId(currentTrack?.nextTrack._id);
        })
        .catch(err => {
          console.error(err);
        });
    }
  }, [user, reload, setCurrentTrackName, setNextTrackName, setNextTrackId]);

  return (
    <FlexContainer justify="space-between">
      <LeftContainer flexDirection="column" justify="center">
        <Label>Current Fitness Track:</Label>
        <PlanName>{currentTrackName}</PlanName>
        <Text>Ready to move to the next stage? Switch your plan now!</Text>
      </LeftContainer>
      <RightContainer flexDirection="column" justify="center">
        <ArrowBlue onClick={launchModal} />
      </RightContainer>
      <SwitchPlanModal
        open={open}
        handleClose={closeModal}
        userId={user._id}
        currentTrackName={currentTrackName}
        nextTrackId={nextTrackId}
        nextTrackName={nextTrackName}
        reload={reload}
        setReload={setReload}
        {...props}
      />
    </FlexContainer>
  );
};

切换计划的模式：

const SwitchPlanModal = ({
  open,
  handleClose,
  userId,
  currentTrackName,
  nextTrackName,
  nextTrackId,
  setReload,
  reload,
  ...props
}) => {
  const [error, setError] = useState('');
  const handleClick = async e => {
    try {
      if (nextTrackId) {
        await switchTrack(userId, nextTrackId);
        setReload(!reload);
        setError('');
        handleClose();
      } else {
        setError('No next track defined');
      }
    } catch (err) {
      console.error(err);
      if (err.message) {
        setError(err.message);
      } else if (err.error.message) {
        setError(err.error.message);
      }
    }
  };

  return (
    <div>
      <Modal open={open} onClose={handleClose}>
        <StyledDialogContent>
          <Container justify="center" flexDirection="column">
            <NavBar justify="space-between" alignItems="center">
              <CloseRight>
                <CloseIcon handleClose={handleClose} />
              </CloseRight>
            </NavBar>
            <ModalBody
              justify="space-evenly"
              alignItems="center"
              flexDirection="column"
            >
              <StyledAvatar src={`${fileStorage}/AddExercise.png`} />
              <FlexContainer flexDirection="column" alignItems="center">
                <Header>Ready for the next stage?</Header>
              </FlexContainer>
              <FlexContainer flexDirection="column" alignItems="center">
                <Button
                  buttonText="Let's Go!"
                  onClick={handleClick}
                />
                <Link onClick={handleClose}>Nope, not yet</Link>
                {error && <ErrorMessage>{error}</ErrorMessage>}
              </FlexContainer>
            </ModalBody>
          </Container>
        </StyledDialogContent>
      </Modal>
    </div>
  );
};

标签： javascriptreactjs