使用上下文进行状态过滤

Question

我正在尝试使用react-router-dom的useParams中提供的id从上下文中过滤传入的状态数组。 基本上，状态来到组件，并在组件过滤中发生：

import React, { useContext } from 'react';
import { Link, useParams } from 'react-router-dom';
import { DetailContext } from '../store/DetailContext';

export default function SelectedMovie() {
const [details] = useContext(DetailContext);
const { id } = useParams();
if (details) {
const [filteredDetails] = details.filter(detail => {
return detail.id === id;
});
return (<div>{filteredDetails}</div>);
} else {
return '';
}
}

首先，我需要在过滤之前检查状态是否已获取，因此我用 if/else 包装了组件，但我不确定这是否是一种好的做法。

有没有办法在上下文中进行过滤，子组件只加载它需要的内容？ 我可以将 useParams ID 传递给上下文吗？

谢谢。

Answer 1

上下文可以公开一个函数，该函数将使您获得过滤details。但是，这意味着组件不会在更新details时更新，只会在id更改时更新。

我会使用一个记忆函数来获取过滤状态，所以只要id和details不改变，该函数就会只返回记忆值：

export default function SelectedMovie() {
const [details] = useContext(DetailContext);
const { id } = useParams();
const [filteredDetails] = useMemo(() => 
details ? details.filter(detail => detail.id === id) : [null]
, [details, id]);
return filteredDetails ?
<div>{filteredDetails}</div>
:
null;
}