使用 Context 进行 React 状态过滤

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。但是，这意味着组件不会在 details 更新时更新，只有在 id 更改时才会更新。

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

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

使用 Context 进行 React 状态过滤

React State filtering with Context

javascript

reactjs

state

react-state-management