如何在API获取数据后触发useLayoutEffect？加载状态失效问题求助

1. 修正useEffect的依赖数组位置 #

你代码里把useEffect的依赖数组错误放在了then的第二个参数中，这会导致副作用逻辑无法正确响应依赖变化，甚至引发闭包问题。正确写法是将依赖数组作为useEffect的第二个参数传入：

useEffect(() => {
  const link = `mylink`;
  fetch(link)
    .then((response) => response.json())
    .then((data) => {
      setMember(data[id-1])
      setLoading(false)
    })
}, [id]) // 此处添加依赖（比如id），确保数据更新时重新发起请求

2. 确保元素渲染时才绑定ref #

即便loading设为false，如果member数据未正确加载导致<span>未渲染，ref.current依然会是null。建议通过条件渲染确保元素仅在!loading时存在：

{!loading && (
  <span className='big' id='meria' ref={ref} style={{marginRight: width / 2}}>
    {/* 这里渲染member相关内容 */}
  </span>
)}

3. 在useLayoutEffect中增加ref存在性判断 #

useLayoutEffect会在DOM更新后同步执行，但仍需确保ref.current已指向真实DOM元素，避免触发null访问错误：

useLayoutEffect(() => { 
  if (!loading && ref.current) {
    setWidth(ref.current.offsetWidth);
  }
}, [language, loading])

额外说明 #

确认你的ref是通过const ref = useRef(null)声明的，useRef能保证ref对象在组件整个生命周期内保持稳定，不会因重渲染重置。

内容的提问来源于stack exchange，提问作者goga goglika