Блог

Не знаю, как это исправить. Мы получаем массив объектов из нашего API и используем его для создания данных в представлении. В то же время в дочернем компоненте (фильтры) Я хочу сопоставить одно из полей в данных, чтобы создать свои категории фильтров. Фильтр вызовет новые данные из API с параметром, и эти данные будут возвращены и обновят реквизиты (я думаю, что это проблема, так как это перенаправляет дочерний компонент, используя отфильтрованные данные, чтобы снова задать категории).

Я думал, что помещение массива в useEffect остановит его обновление.

Вот текущий tsx в моем компоненте фильтра:

 const ExclusiveOffersFilters = (props: ExclusiveOffersFiltersProps): JSX.Element => {
  const newFilters = JSON.parse(JSON.stringify(props.options)); // copy the object from props
  let filterOffers;

  useEffect(() => {
    filterOffers = newFilters.map((item: any) => {
      return { value: item.offerType, display: item.offerType };
    });
    console.log('filterOffers: ', filterOffers); // succesfully logs the filtered items. 
  }, []);

  return (
    <tr>
      <th>
        <Filter
          options={filterOffers} // here filterOffers is undefined
          alignRight={props.alignRight}
          handleClick={props.handleFilterChange}
          multiSelect={props.multiSelect}
          selectedItems={props.selectedItems}
        />
      </th>
    </tr>
  );
};
 

Я также попробовал const newFilters = [...props.options]; и newFilters = props.options.slice(0) , но это та же проблема (казалось, разумнее было использовать JSON-анализ/stringify).

В моем родительском компоненте я называю ребенка так:

<ExclusiveOffersFilters handleFilterChange={props.handleFilterChange} options={props.options} />

Если я удалю useEffect функцию и просто обновлю фильтры, она будет работать, однако после выбора одного фильтра приложение обновит вызов api, получит обратно только отфильтрованные данные, и поэтому в фильтрах задана только одна категория. Что мне нужно предотвратить.

Мне нужен способ получить исходные категории и заморозить их обновление.

Редактировать

Вот наши примерные данные:

 const data = [
  {
    offerId: 1,
    partnerName: "Another offer 4",
    imageUrl:
      "https://www.auctsjpg-w263-h98-99382466814e33da0cfa3d5d2afd921c.jpg",
    description:
      "Save up to 10% on something. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
    header: "Save up to 10%",
    enabled: true,
    deleted: false,
    offerType: "Motoring"
  },
  {
    offerId: 0,
    partnerName: "Amazing offer 4",
    imageUrl: "https://www.cGen",
    description:
      "Save up to 20% off* your business insurance thanks to our partnership with<BR/> Churchill Expert. Simply visit the Churchill Expert web page and choose the<BR/> insurance product to suit your business.<BR/>     Churchill Expert will automatically apply the discount to your premium for the<BR/>duration of your policy.     <BR/><BR/>*Minimum premiums apply. Discount applies to NIG policies arranged by Churchill Expert <BR/>and underwritten by U K Insurance Limited.<BR/> Professional Indemnity excluded.",
    header: "Save up to 20% off",
    enabled: true,
    deleted: false,
    offerType: "Insurance"
  },
  {
    offerId: 190,
    partnerName: "Amazing offer 4",
    imageUrl: "https://www.ch.Code=ExpertGen",
    description:
      "Save up to 20% off* your business insurance thanks to our partnership with<BR/> Churchill Expert. Simply visit the Churchill Expert web page and choose the<BR/> insurance product to suit your business.<BR/>     Churchill Expert will automatically apply the discount to your premium for the<BR/>duration of your policy.     <BR/><BR/>*Minimum premiums apply. Discount applies to NIG policies arranged by Churchill Expert <BR/>and underwritten by U K Insurance Limited.<BR/> Professional Indemnity excluded.",
    header: "Save up to 20% off",
    enabled: true,
    deleted: true,
    offerType: "Insurance"
  }
];

export default data;
 

Если мы отфильтруем по типу предложения = Автомобильное движение, то мы снова вызовем наш api с автомобильным движением в качестве фильтра, это вернет только 1 запись из приведенных выше данных, но теперь наш фильтр обновляется и показывает только 1 категорию фильтра автомобильного движения.

Смотрите прилагаемые примеры из приложения.

Я сбросил большую часть файлов сюда: https://codesandbox.io/s/charming-sinoussi-l2iwh?file=/data.js:0-2061 с образцами данных. Я не знаю, насколько это полезно, трудно привести рабочий пример, когда существует так много зависимостей.

Родительский index.tsx обрабатывает все вызовы api ajax и передает данные в реквизит. Файл ExclusiveOffersFilters.tsx получает это и обновляется, и это та часть, которую я хочу остановить. Как отмечает @Adam в комментариях, мы пытаемся это исправить, но я думаю, что на самом деле с родителем все в порядке, проблема в ребенке.

Мы действительно хотим применить эту логику в другом месте приложения, поэтому производительность будет хорошей. Мне интересно, нужно ли мне просто не использовать props.options и использовать для этого другую опору?

1. useEffect выполняет асинхронно, поэтому filterOffers может быть неопределенным в момент рендеринга.
2. Если вы хотите создать значение на основе какого-либо другого значения и хотите оптимизировать его, используйте useMemo hook.
3. Если вы хотите сохранить значение между повторными визуализациями компонента, используйте useRef крюк.

    const newFilters = useRef(JSON.parse(JSON.stringify(props.options))); // copy the object from props
   const filterOffers = useMemo(() => {
        filterOffers = newFilters.current.map((item: any) => {
            return { value: item.offerType, display: item.offerType };
        });
        console.log('filterOffers: ', filterOffers); // succesfully logs the filtered items. 
   }, [newFilters]);
    

Это все, что вам нужно. Если у вас возникнут проблемы с производительностью, используйте useMemo . Если у вас не возникнет проблем с производительностью, ничего не предпринимайте

 const ExclusiveOffersFilters = (props: ExclusiveOffersFiltersProps): JSX.Element => {

  const filters = props.options.map((item) => ({
    value: item.offerType, 
    display: item.offerType
  }));

  return (
    <tr>
      <th>
        <Filter
          options={filters}
          alignRight={props.alignRight}
          handleClick={props.handleFilterChange}
          multiSelect={props.multiSelect}
          selectedItems={props.selectedItems}
        />
      </th>
    </tr>
  );
};
 

Пример с useMemo

  const filters = useMemo(() => props.options.map(....),[props.options]);
 

Я не могу достаточно сильно напрягаться, чтобы держаться подальше, useMemo если вы не абсолютно уверены, что вам это нужно.