Question

我有要从存储为items的api中获取的数据，

{ '001': {id: '001', name:'foo',color:'blue' }}, '002': { id: '002',name:'bar',color:'orange' }, '003': { id: '003',name:'baz',color:'pink' }}

，它将添加到我的redux状态树中，并确定在特定路径上呈现的内容。例如，转到/foo会将用户定向到具有其关联颜色blue的背景色的页面。我有一些代码开始尝试实现，但是对于如何协调它却感到困惑。我正在考虑做类似运行Object.keys(props.items).find(id => props.items[id].name === match.params.name)的事情，但是认为这不是一个超级可伸缩的解决方案，并且会导致失去具有对象的O（1）查找。代码在这里：https://codesandbox.io/s/n562wzzmkm

Answer 1

如果您想将name属性用作每个项目的路径，那么在我看来，您提到的匹配（搜索/查找）方法可能是最佳选择。由于name的每个项目都下降了一层，我们必须在所有项目中搜索与match.params.id onClick的匹配项，以便使用{正确的项目数据。

但是，如果您愿意的话，我建议您将每个项目的顶级密钥（即<Detail/>，001，002）用作{{ 1}}属性，用于映射的003组件。这样，我们仍然可以通过将该方法与to的{{1}}道具结合使用来实现O（1），该道具处理使用所选项目的数据渲染<Link/>组件。我们仍将使用render进行查找，但是我们只需要查看<Route/>的顶层即可找到正确的项目并成功设置正确的背景颜色。

以下有问题的代码以及您的CodeSandbox的分支：https://codesandbox.io/s/xl8von46nw?fontsize=14

<Detail/>

希望有帮助或可以接受的解决方案！

如何管理React Router和Redux之间的状态

1 个答案: