在反應鈎子中設置 setState

Question

我有兩個按鈕在PageOne.tsx中create signature和Create delivery ，此時 state 是InDelivery然后兩者都是可見的。

我的觀點是如何在開始時隱藏Create delivery按鈕，但是當用戶單擊PageTwo中的create signature按鈕並在該頁面內用戶單擊Submit按鈕時，該按鈕將用戶帶回此PageOne.tsx 。

然后在這里只有Create delivery按鈕應該是可見的，如果有人使用我的代碼並提供工作示例，我將不勝感激，（我是新來的）我的代碼：

import React, { ReactNode, useContext, useEffect, useState } from "react";
export function PageOne(props: React.PropsWithChildren<OrderDetailsDto>) {

    const [deliveredd, setDeliveredd] = useState(false);

    const RedirectToSign = () => {
        setDeliveredd(true);

        history.push("/PageTwo/" + orderId);
    };

    const RedirectToDeliv = () => {
        history.push("/PageThree/" + orderId);
    };
    const SignatureButton = () => {
        if (initialRequest.type == ApiRequestStatus.Complete) {
            var state = initialRequest.responsePayload.order?.state as OrderState;

            if (state == OrderState.InDelivery || state == OrderState.Delivered) {
                return (
                    <div onClick={RedirectToSign} className="Button">
                        create signature
                    </div>
                );
            }
        }
    };
    const UpdateButton = () => {
        if (state === OrderState.InDelivery) {
            return (
                <div onClick={RedirectToDeliv} className="Button">
                    Create delivery
                </div>
            );
        }
    }
    console.log(deliveredd);
    return (
        <div className="orderDetails">

            {UpdateButton()}
            {SignatureButton()}
        </div>
    );
}

我的 PageTwo 會是這樣的：

import React from "react";
import { Button, Form, Input } from "antd";


export function PageTwo(props: React.PropsWithChildren<CreateSignatureProps>) {


    const SendSignature = (values: Values) => {

        api.cargoApi
            .apiCargSignaturePost(request)
            .then((response) => history.push("/PageOne/" + orderId));
    }


    return (
        <Form onFinish={SendSignature}>
            <Form.Item>
                <Button type="primary" htmlType="submit">
                    {t("signature.create")}
                </Button>
            </Form.Item>
        </Form>
    );
}

Answer 1

這是你可以做的。 當您從PageTwo重定向到PageOne時，傳遞一個 state 指示要隱藏哪個按鈕以及要在PageOne中顯示哪個按鈕。

在PageTwo ：

history.push({
  pathname: "/PageOne/" + orderId,
  state: { hideCreateDelivery: true,  showCreateSignature: true}
})

在PageOne中：

// to get the data from redirection
import { useLocation } from "react-router-dom";

// Inside PageOne
const location = useLocation();

// replace this
return (
  <div className="orderDetails">
    {location.state && location.state.hideCreateDelivery ? null: UpdateButton()}
    {location.state && location.state.showCreateSignature 
      ? SignatureButton()
      : null}
   </div>
 );