javascript - 使用 Context 进行 React State 过滤

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 包装了组件，但我不确定这是否是一个好的做法。

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

谢谢。

Answer 1

上下文可以公开一个函数，该函数将为您提供过滤后的详细信息。但是，这意味着组件不会在 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;
}