在反应钩子中设置 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>
 );