设置useState后如何执行Link Router？

Question

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

按钮组件来了。

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} alt="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 函数吗？

Answer 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} alt="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