history.push 更改 url 但不呈現表單反應掛鈎

Question

英語不是我的母語，所以很抱歉出現錯誤，我是初學者，我的問題：當用戶單擊“發件人”按鈕時，我在路線 /#/billingInfo/ 付款人姓名將是發件人姓名，並且與“收件人”按鈕相同，但問題是我正在推送相同的 url 這是同一頁面，我應該在我的輸入中獲取發送者或接收者的名稱，但只有當我刷新頁面時，我的問題是如何不刷新頁面並在我的輸入（需要在用戶單擊這些按鈕時呈現/強制更新 <Form> 或特定輸入？？）

我的代碼：

const [form] = Form.useForm();

  const query = window.location.toString().split("?")[1];

  const urlParamss = new URLSearchParams(query);

  const payer = new URLSearchParams(query).get("payer");
  const bNameUrl = urlParamss.get("bName");

  const PickUpName = urlParamss.get("pName");

  const DeliveryName = urlParamss.get("dName");

  let bName;

  if (payer === "sender") {
    bName = PickUpName;
  } else if (payer === "receiver") {
    bName = DeliveryName;
  }

  const senderPays = () => {
    history.push(`/billingInfo/${customerId}?${query}&payer=sender`);
  };

  const receiverPays = () => {
    history.push(`/billingInfo/${customerId}?${query}&payer=receiver`);
  };
  return (
    <div>
      <Form>
        <div>
          <Button onClick={senderPays}>sender</Button>
          <Button onClick={receiverPays}>receiver</Button>
        </div>
        <Form.Item
          label="payers name"
          name="bName"
          initialValue={bNameUrl || bName}
        >
          <Input type="string" />
        </Form.Item>
      </Form>
    </div>
  );
}

export default BillingInfo;

Answer 1

如果payer查詢參數是推送新路由時 url 的唯一區別，那么您可以在useEffect掛鈎中“監聽”該值的更改。

1. 創建自定義查詢參數掛鈎。 來自 React-Router 文檔查詢參數。

    const useQuery = () => { return new URLSearchParams(useLocation().search); };

2. 使用此鈎子獲取查詢參數。

    const { payer, bName: bNameUrl, dName: DeliveryName, pName: PickUpName } = useQuery();

3. 將bName移動到組件 state 中。

    const [name, setName] = useState(bNameUrl || bName);

4. 使用useEffect處理對payer的任何更改並更新name state。

    useEffect(() => { setName(payer === 'sender'? PickUpName: DeliveryName); }, [payer]);

5. 將name呈現為默認輸入值（保留您可能擁有的任何表單邏輯）。 在表單上使用 react 鍵來幫助“重新初始化”它，通過指示響應它是一個“新”組件並且需要安裝。 請參閱帶有鍵的完全不受控制的組件。

    <Form key={name}> <div> <Button onClick={senderPays}>sender</Button> <Button onClick={receiverPays}>receiver</Button> </div> <Form.Item label="payers name" name="bName" initialValue={name} > <Input type="string" /> </Form.Item> </Form>