如何在主屏幕中使“返回”按钮更改状态

Question

所以我得到了一个餐厅名称列表（比如从 api 获取）。当我单击餐厅名称时，我希望它链接到该特定餐厅的个人资料页面，这会将文本设置为“已选择”。当我在该个人资料页面上单击“返回”返回主页时，我希望该餐厅名称显示“未选择”。

所以，如果我点击餐厅名称，然后在个人资料页面返回主页，餐厅将显示“未选择”，因为它在主页中被选中，然后在个人资料页面中被取消选择。但是，如果我单击餐厅名称，则不是通过单击“返回”返回主页，而是输入主页的 url，它将显示“已选择”。

我正在努力做到这一点，所以当我点击“返回”时，主页显示餐厅名称为“未选择”。

https://codesandbox.io/s/serene-williams-2snv1c?file=/src/App.js

（如果我能得到这种概念的名称，我也将不胜感激，以便我自己查找）

Answer 1

如果你想知道用户点击了什么，什么没有点击，你需要定义某种state。这是一种方法：

App.js

import "./styles.css";
import data from "./data";
import { Link, Route } from "wouter";
import { useState } from "react";

export default function App() {
  const [clickedRestaurants, setClickedRestaurants] = useState([])

  return (
    <Route path="/">
      <div className="App">
        {data.map((restaurant) => {
          return (
            <Button
              restaurant={restaurant}
              hasBeenClicked={clickedRestaurants.includes(restaurant)}
              setClicked={() => {
                if (!clickedRestaurants.includes(restaurant)) {
                  setClickedRestaurants([...clickedRestaurants, restaurant])
                }
              }}
            />
          );
        })}
      </div>
    </Route>
  );
}

function Button({ restaurant, hasBeenClicked, setClicked }) {
  return (
    <>
      <Link href={`/restaurant/${restaurant}`} onClick={setClicked}>
        <button>{restaurant}</button>
      </Link>
      <p>{restaurant} has {hasBeenClicked ? "" : "not "}been clicked</p>
    </>
  );
}