Question

英语不是我的母语，很抱歉有错误，我是初学者，我的问题是：我在路线 /#/billingInfo/ 当用户点击“发件人”按钮时，付款人姓名将是发件人姓名和“收件人”按钮相同，但问题是我推送的是同一页面的相同网址，我在输入中得到发件人或收件人姓名，但我应该这样做只有当我刷新页面时，我的问题是如何不刷新页面并在我的输入中获取它们（需要渲染/强制更新

或用户单击这些按钮时的特定输入 ??)

我的代码：

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 查询参数是推送新路由时网址的唯一区别，那么您可以在 useEffect 挂钩中“监听”该值的变化。

创建自定义查询参数挂钩。来自 React-Router 文档 Query Parameters。

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

使用这个钩子来获取查询参数。

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

将 bName 移动到组件状态。

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

使用 useEffect 处理对 payer 的任何更改并更新 name 状态。

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

将 name 渲染为默认输入值（保留您可能拥有的任何表单逻辑）。使用表单上的反应键通过指示反应它是一个“新”组件并需要安装来帮助“重新初始化”它。见Fully uncontrolled component with a key。

<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>

history.push 更改 url 但不呈现表单反应钩子

1 个答案: