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

使用上下文进行状态过滤

1 个答案: