React Router 发送一个状态

Question

我创建了一个 Clients 列表，用户单击其中一个 Clients 他们将 Link 到页面并将数据作为状态发送。我从使用 Context

之前获取的 portfolio 获取数据

      {portfolio.map((data) => {
        const { id, name, image, logo, year, title, text, path } = data;
        return (
          <Link to={`/portfolio/${path}`} key={id} state={data}>
            <div
              className={`grid-item grid-item--${id}`}
              style={{
                backgroundImage: `url(${image})`,
                backgroundSize: "cover",
                backgroundPosition: "center center",
              }}
            >
              <img src={logo} alt={name} className="cls-logo" />
              <div className="cls-text">
                <div className="cls-text-wrapper">
                  <h1>{year}</h1>
                  <h3>{title}</h3>
                  <p>{text}</p>
                </div>
              </div>
            </div>
          </Link>
        );
      })}

它成功了一会儿，然后我添加了一个 Link 以使其更容易通过添加 prev 和 next Client 如果他们想看它。

let data = useLocation();
const { id, name, logo, image, text, title, year } = data.state;

  const { portfolio } = useGlobalContext();
  let prev = id - 1;
  if (prev === 0 && portfolio !== []) {
    prev = portfolio.length - 1;
  }

  let next = id + 1;
  if (next > portfolio.length - 1 && portfolio !== []) {
    next = 1;
  }

我遇到的问题是：

似乎我不能使用 portfolio 因为它一开始是未定义的，所以 React 无法从中获取值。
如果我评论 prev & next 我的代码工作正常，当我点击刷新按钮时它也正常。但问题是当我尝试直接从 URL 访问它时，因为我没有向组件发送任何数据。

感谢任何回复，先谢谢了。

Answer 1

由于您似乎可以访问接收组件中与链接组件相同的 portfolio 数组，我建议使用动态路由参数作为“搜索”键来查找匹配的投资组合元素。这避免了需要将路由状态作为 发送的问题， “状态”很容易从 portfolio 数组和当前路由路径参数中导出。

假设路由路径声明为 path="/portfolio/:path"，使用 useParams 钩子获取当前匹配的 path 参数并搜索 portfolio 数组。

示例：

const { path } = useParams();
const [ite, setItem] = useState();

const { portfolio } = useGlobalContext();

useEffect(() => {
  setItem(portfolio.find(item => item.path === path));
}, [path, portfolio]);

...

从这里您可以调整您的 prev/next 逻辑以更新路由路径并让 react-router-dom 和 useEffect 挂钩重新呈现并加载正确的投资组合项目。

React Router 发送一个状态

React Router sending a state

reactjs

react-router

react-router-dom