Блог

У меня есть эта ссылка, которая содержит массив. У меня есть контекст, который содержит ссылку и другой контекст с информацией о ссылке. Я хотел сделать элементы массива реактивными, поэтому я заключил данные в наблюдаемый класс и создал этот хук, чтобы скрыть логику подписки / отмены подписки:

 const useData = (index: number) => {
  const refs = useRefData();  // A hook that gets the ref from a context and returns it
  const { dataLength} = useContext(StatContext);
  const observable = refs.current?.[index];
  const [value, setValue] = useState<Readonly<DataModel>>(
    observable?.Data ?? PLACEHOLDER,
  );

  useEffect(() => {
    const observable = refs.current?.[index];
    const subscriber: ObservableSubscriber<DataModel> = (
      newValue,
      oldValue,
      isPartial,
    ) => {
      const updatedValue = isPartial
        ? ({ ...oldValue, ...newValue } as DataModel)
        : (newValue as InsightApiResponse);
      setValue(updatedValue);
    };
    observable?.subscribe(subscriber);
    return () => {
      observable?.unsubscribe(subscriber);
    };
  }, [dataLength]);

  return value;
};
 

Моя проблема в том, что если один из элементов в массиве удаляется, свойство dataLength обновляется, переадресация переадресации, оно получает новое правильное значение, но в пользовательском интерфейсе всегда отображается, что последний элемент был удален. Это имеет некоторый смысл, поскольку я визуализирую элементы, повторяющиеся от 0 до dataLength, чтобы предоставить элементам индексы для вызова перехвата. Что не имеет смысла, так это то, что, хотя данные хукинга обновляются, поэтому каждый элемент пользовательского интерфейса отображает новый правильный элемент данных после удаления элемента, элементы пользовательского интерфейса не повторяются. Что-то не так с моим хуком?