在 useEffect 中更新一个不同的状态后反应更新状态

Question

在我的 useEffect 挂钩中更新/设置不同的状态后，我需要更新我的状态。到目前为止它不起作用。我在这里做错了什么？

isDisabled 逻辑取决于其他状态的值。

const OffersDialogueButton = ({
  type,
  status,
}) => {
  const { invitationType, status: cardStatus } = useJobPositionsContext();
  const { jobPosition } = useJobDetailContext();
  const [dialogStatus, setDialogStatus] = useState<CardStatus>();
  const [dialogType, setDialogType] = useState<CardType>();
  const [color, setColor] = useState<string>();
  const [isDisabled, setIsDisabled] = useState(false);

  useEffect(() => {
    setDialogStatus(status || cardStatus);
    setDialogType(type || invitationType || 'default');
    setIsDisabled(
      (dialogType === 'invitation' && dialogStatus !== 'pending') || (dialogType === 'application' && cardStatus !== 'accepted'),
    );
    setColor(BUTTON_VARIANT_BY_STATUS[dialogStatus]);
  }, [type, status, isDisabled]);

Answer 1

dialogType 和 dialogStatus 在同一个函数中设置，状态 set 是异步的，因此当您在同一个函数中检查它们时，您不能期望它们被设置。对于这些变量，您应该有一个新的 useEffect 或用于检查的局部变量。

Answer 2

据我了解，您想通过 setDialogType 设置 setIsDisabled，您需要使用其他 useEffect

React.useEffect(() => {
    setIsDisabled(
      (dialogType === 'invitation' && dialogStatus !== 'pending') || (dialogType === 'application' && cardStatus !== 'accepted'),
    );
  }, [dialogType])

setDialogType 是异步的，不能在setState 之后立即访问它。

在此处阅读有关 React 状态的更多信息 State

Answer 3

计算isDisabled和color状态变量时，必须使用dialogStatus和dialogType的新值。

const OffersDialogueButton = ({type, status}) => {
  const { invitationType, status: cardStatus } = useJobPositionsContext();
  const { jobPosition } = useJobDetailContext();
  const [dialogStatus, setDialogStatus] = useState<CardStatus>();
  const [dialogType, setDialogType] = useState<CardType>();
  const [color, setColor] = useState<string>();
  const [isDisabled, setIsDisabled] = useState(false);

  useEffect(() => {
    const nextDialogStatus = status || cardStatus;
    const nextDialogType = type || invitationType || 'default';
    const nextIsDisabled = 
      (nextDialogType === 'invitation' && nextDialogStatus !== 'pending') || 
      (nextDialogType === 'application' && cardStatus !== 'accepted');
    const nextColor = BUTTON_VARIANT_BY_STATUS[nextDialogStatus];

    setDialogStatus(nextDialogStatus);
    setDialogType(nextDialogType);
    setIsDisabled(nextIsDisabled);
    setColor(nextColor);
  }, [status, cardStatus, type, invitationType]);

在 useEffect 中更新一个不同的状态后反应更新状态

React update state after updating a different one in useEffect

javascript

reactjs

react-hooks