Reactjs 钩子会被更新，但不会'；不要触发重新渲染

我有一个包含数组的ref。我有一个保存ref的上下文和另一个包含ref信息的上下文。我想让数组的项成为反应性的，所以我将数据包装在一个可观察类中，并构建这个钩子来隐藏订阅/取消订阅逻辑：

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

constusedata=（索引：number）=>{
const refs=useRefData（）；//从上下文获取ref并返回它的钩子
const{dataLength}=useContext（StatContext）；
可观测常数=参考电流？[指数]；
const[value，setValue]=useState(
可观察？数据？占位符，
);
useffect（（）=>{
可观测常数=参考电流？[指数]；
常量订户：ObservableSubscriber=(
新价值，
oldValue，
第一部分，
) => {
常量updatedValue=isPartial
？（{…oldValue，…newValue}作为数据模型）
：（newValue作为InsightApiResponse）；
setValue（updatedValue）；
};
可观察？订阅（订户）；
return（）=>{
可观察？取消订阅（订户）；
};
}，[dataLength]）；
返回值；
};

---

我的问题是，如果数组中的一个项被删除，dataLength属性会更新，钩子会重新引发，它会获取新的正确值，但在UI中，最后一个项总是被删除的。这是有意义的，因为我正在呈现从0到dataLength的迭代项，以便为这些项提供调用钩子的索引。没有意义的是，即使钩子数据得到更新，以便在删除元素后每个UI项都显示其新的正确数据项，UI元素也不会重新渲染。我的钩子有什么问题吗？

你能在代码沙盒上托管这个吗？这样我就可以复制这个问题了？如果项目的顺序可以更改，请不要使用。删除的项目会导致订单更改。脏修复程序可以是

key={Date.now（）}

，但您应该为每个项目指定一个唯一的id，因为脏修复程序将不必要地重新呈现所有内容。@DolevDublon不是真正的封闭源有两种触发呈现的方法。第一个是改变状态，第二个是改变道具。我想在你的一些案例中可能不会发生这种情况