设置useState后如何执行Link Router？

Posted 2023-02-22

【中文标题】设置useState后如何执行Link Router？

【英文标题】：How execute Link Router after to set useState?

【发布时间】：2021-11-20 15:41:24

【问题描述】：

当我点击某个按钮时，我想制作一个程序，路由器将按钮的信息传递到后面的页面。

按钮组件来了。

import React, useState, useEffect from 'react';
import Route, Link from 'react-router-dom';

function Restaurant_Item(rlist) 
const [rstData, setResData] = useState([]);
const [linkName, setLinkName] = useState("abc");
let rlist_tmp = [];

const goDetail = (rkey) => 
    setResData(rlist[rkey])
    setLinkName(rlist[rkey].restName)


for (let rkey in rlist) 
    rlist_tmp.push(
        <Link to=
            pathname :"/restaurant_result",
            search : `?sort=$linkName`,
            state: data : rstData
            >
            <div className="rst_list_cell" onClick=() => goDetail(rkey)>
                <div key=rkey>
                    <button className="rst_list_name">
                        rlist[rkey].restName
                    </button>
                    <div className="rst_list_position">
                        rlist[rkey].address
                    </div>
                </div>
            </div>
        </Link>
    )


return (<div>
    rlist_tmp
</div>);


export default Restaurant_Item;

这个组件从状态中获取对象。这些状态反映在 div 标签上。 当用户点击这个关于餐厅的 div 标签时，页面会随着包含餐厅详细信息的详细页面发生变化。

这是详细页面。

import React, useEffect from 'react';
import Link from "react-router-dom";
import Restaurant_result_axios from './Restaurant_result_axios.js';

import backicon from "../assets/backicon.png";

const Restaurant_result = (data) => 
  console.log(data)
  return (
    <div>
        <Link to="./restaurant_list"><img className="backicon" src=backicon /> 
 </Link>
        <div className="rst_result_prom"/>
        <div className="rst_result_cell">
            <div>
                <div className="rst_result_name">
                  
                </div>
                <div className="rst_result_position">
                  
                </div>
            </div>
        </div>
    </div>
);
;

export default Restaurant_result;

但是我发现了一些问题。如果用户点击了 div 标签，路由器会在执行 goDetail 函数之前更改页面。我不知道如何解决这个问题。我可以在链接之前执行 goDetail 函数吗？

【参考方案1】：

您可以在下面尝试我的代码，在RestaurantItem Component 中，我从该组件中删除了<Link></Link>，因为您希望首先使用goDetail 函数来获取有关用户点击数据的详细信息。所以我导入 useHistory 来替换 Link 并放入 const 历史记录。我将history 放入goDetail 函数中。它看起来和你之前的Link 一样。你可以在这里关注我的代码：

RestaurantItem Component

import React,  useState  from "react";
import  Link, useHistory  from "react-router-dom";

function Restaurant_Item( rlist ) 
  const history = useHistory();
  const [rstData, setResData] = useState([]);
  const [linkName, setLinkName] = useState("abc");
  let rlist_tmp = [];

  const goDetail = (rkey) => 
    const data = rlist[rkey];
    const link = rlist[rkey].restName;

    setResData(data);
    setLinkName(link);
    history.push(
      pathname: "/restaurant_result",
      search: `?sort=$link`,
      state:  data: data 
    );
  ;

  for (let rkey in rlist) 
    rlist_tmp.push(
      <div className="rst_list_cell" onClick=() => goDetail(rkey)>
        <div key=rkey>
          <button className="rst_list_name">rlist[rkey].restName</button>
          <div className="rst_list_position">rlist[rkey].address</div>
        </div>
      </div>
    );
  

  return <div>rlist_tmp</div>;


export default Restaurant_Item;

对于RestaurantResult Component 导入useLocation 以访问从RestaurantItem Component 到history.push 传递的状态。

RestaurantResult Component

import  Link, useLocation  from "react-router-dom";

import backicon from "../assets/backicon.png";

const Restaurant_result = () => 
  const location = useLocation();

  return (
    <div>
      <Link to="/restaurant_list">
        <img className="backicon" src=backicon  />
      </Link>
      <div className="rst_result_prom" />
      <div className="rst_result_cell">
        <div>
          <div className="rst_result_name">location.state.data.restName</div>
          <div className="rst_result_position">
            location.state.data.address
          </div>
        </div>
      </div>
    </div>
  );
;

export default Restaurant_result;

我只是在代码沙箱中测试它是链接： This is Code Sandbox Link

【讨论】：

非常感谢！我用你的解决方案解决了这个问题！！！！！！！我没想到 useHistory。