React路由器发送状态

Question

我创建了一个Clients列表，用户单击其中一个Clients，他们将链接到页面并将数据作为状态发送。我从使用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和nextClient，这样更容易导航

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

我遇到的问题是：

1. 似乎我不能使用portfolio，因为它一开始是未定义的，所以React无法从中获取值。

2. 如果我评论CCD_ 11&next我的代码运行得很好，当我按下刷新按钮时也很好。但问题是当我尝试直接从URL访问它时，因为我没有向组件发送任何数据。

感谢您的回复，谢谢。

Answer 1

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

假设路由路径被声明为类似于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]);
...

从这里，您可以调整上一个/下一个逻辑来更新路由路径，并让react-router-dom和useEffect钩子重新应答并加载正确的公文包项目。