从 url 获取信息答案

【问题标题】：getting information from url从 url 获取信息
【发布时间】：2021-07-01 16:24:19
【问题描述】：

这里是 React 初学者，英语不是我的母语，如有错误请见谅。我有来自那里的 url 我想获取信息我将展示我是如何完成其他页面的（使用antd 表单），但现在我在不同的页面中，我的 url 末尾是payer=sender，所以如果@ 987654324@ 是"sender" 然后执行此操作。我的网址末尾的“付款人=发件人”是通过单击发件人按钮来实现的，然后当单击它时，表单输入应相应填写

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

          &lt;Button onClick={senderPays}&gt;Sender&lt;/Button&gt;

在之前的页面中，我可以像这样从 url 获得 pickUpName：

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

const urlParams = new URLSearchParams(query);

const PickUpName = urlParams.get("pickUpName") || props.customer?.name;
  
<Form.Item
  label="pickUpName"
  name="pickUpName"
  initialValue={PickUpName || ""}
>
  <Input type="string" />
</Form.Item>

这是我的网址：https://localhost:5001/#/billingInfo/5dc9d690-a549-4baf-868e-a441c6c4ff47?pickUpName=gholam&pickUpContactPerson=&pickUpPhone=8744444&pickUpAddress=gerbytnie&pickUpPostalCode=65230&pickUpPostalRegion=helsnki&deliveryName=shammms&deliveryContactPerson=kalle&deliveryPhone=2658265&deliveryAddress=&deliveryPostalCode=65230&deliveryPostalRegion=&payer=sender

如您所见，网址的结尾是&payer=sender 所以如果payer 是发件人，那么有这些信息，如果payer 是接收者，那么有这些信息：

这是我的代码：

useEffect(() => {
if (payer === "sender") {
  billingName = PickUpName;
} else if (payer === "receiver") {
  billingName = DeliveryName;
}

}, [付款人]);

组件

<Form.Item
  label="billingName"
  name="billingName"
  initialValue={billingName || ""}
>
  <Input type="string" />
</Form.Item>

所以我需要以某种方式在我的表单 initialValue 中获取 billingName，这取决于谁是 payer。

【问题讨论】：

没有完整代码的这个组件很不清楚。所以，请完整编码组件的 sn-p。
这不简单吗，如果 url 的末尾是 payer=sender，那么如果我想在我的表单 initialValue 中包含这些数据，例如 billingName...
很简单，逻辑payer=sender。但是根据假设在哪里申请将是浪费时间。因此，只提供这些组件代码 sn-ps 将节省时间。
请尝试包含Minimal, Complete, and Reproducible Code Example，以便更清楚您可能要做什么。目前尚不清楚为什么您在以前的页面上所做的操作在 this 页面上也不起作用。或者，也许你在问一些不同的东西。试着澄清你想要什么，什么没有按预期工作。
为什么我写我在上一页所做的事情是因为如果条件与 const PickUpName = urlParams.get("pickUpName") 相同，那么里面的 pickUpName 就在 url 中，所以需要使用那

标签： javascript html reactjs antd

【解决方案1】：

使用useForm react hook手动初始化字段：

总结：

使用useForm()初始化表单实例。
将FormInstance 传递给您的Form
使用useEffect钩子根据payer的值动态设置Form.Item的值

import { Form } from 'antd';


const Demo = () => {
  // Note that `useForm` is a React Hook and will only works in functional components
  const [form] = Form.useForm();

  const payer = new URLSearchParams(window.location.search).get('payer');

  // Manually initialize billingName based on `payer` value 
  useEffect(() => {

    if (payer === "sender") {
      form.setFieldsValue({ billingName: request.pickUpName });
    } else if (payer === "receiver") {
      form.setFieldsValue({ billingName: request.deliveryName });
    }

  }, [payer])

  // Pass the FormInstance `form` to your Form
  return (
      <Form form={form}>
        <Form.Item
          label="billingName"
          name="billingName"
        >
          ...   
       </Form.Item>

      ...
  )

这里有一些文档可以帮助你：

【讨论】：

我正在使用 typescript 获取类型为 '(request: CreateCargoOrderRequest) => void' 的参数不能分配给类型为 'EffectCallback'.ts(2345) 的参数
不要分配任何东西给 useEffect。您需要将回调作为 useEffect 的第一个参数传递。第二个参数是一个参数列表，这些参数将触发您作为第一个参数提供的回调以运行
目前无法识别request，能否添加'request:CreatCargoOrderRequest'
请更新您的问题以包含有关request 是什么的详细信息。包括有关它来自何处以及将调用该函数的被调用者的信息
你写 const payer 的方式我得到了 null，但我尝试了这种方式并得到了 payer: const query = window.location.toString().split("?")[1]; const payer = new URLSearchParams(query).get("payer"); console.log(query);