如何聆听儿童的长度变化反应？

Question

我有一个代码：

const container = useRef();
const [items, setItems] = useState();

useEffect(()=>{
  setItems(container.current.children.length);
},[container.current, container.current.children.length])

return(
<div ref={container}>
  {
  children.map(item => <Item/>)
  }
</div>
)

items.length！== childrent。 >项目相应。但是我会发现无法读取未定义的属性（阅读“孩子”）我知道为什么会发生这种情况，但是我不知道如何处理它。

Answer 1

首先，您绝对不应将useref值放在depenty数组中，因为如果值已更改，它不会触发使用效应回调。

您在这里有两个选择：

1. 创建一个自定义组件，您可以手动观察孩子的长度。

function ChildrenObserver({ children }) {
  const lastCount = useRef(getChildrenCount());
  const currentCount = getChildrenCount();

  function getChildrenCount() {
    return React.Children.toArray(children).length;
  }

  if (lastCount.current !== currentCount) {
    lastCount.current = currentCount;
    console.log("Children length changed to", lastCount.current);
  }

  return children;
}

function App() {
  const [items, setItems] = useState(0);

  return (
    <>
      <button onClick={() => setItems((i) => i + 1)}>Add child</button>
      <ol>
        <ChildrenObserver>
          {Array.from({ length: items }).map((item) => (
            <li key={item}>Item {item}</li>
          ))}
        </ChildrenObserver>
      </ol>
    </>
  );
}

2. 创建一个突变操作器，以聆听DOM更改。

function App() {
  const [items, setItems] = useState(0);

  const setRef = useCallback((ref) => {
    const observer = new MutationObserver((mutationsList) => {
      for (let mutation of mutationsList) {
        if (mutation.type === "childList") {
          console.log("Children length changed to", ref.children.length);
        }
      }
    });

    observer.observe(ref, { childList: true });
  }, []);

  return (
    <>
      <button onClick={() => setItems((i) => i + 1)}>Add child</button>
      <ol ref={setRef}>
        {Array.from({ length: items }).map((item) => (
          <li key={item}>Item {item}</li>
        ))}
      </ol>
    </>
  );
}