React props更新后组件未重渲染持续显示Loading问题排查

你写的OwnersList组件渲染逻辑本身没有语法问题，页面一直卡在Loading的核心原因是父组件更新车主列表数据时违反了React的不可变数据规则，没有触发子组件重渲染。

React对props和state的变化检测走的是浅比较逻辑：对于数组、对象这类引用类型值，只会对比前后的内存引用地址是否一致，不会深度遍历内部内容是否变化。
你现在遇到的情况，基本都是父组件拿到MongoDB返回的数据后，直接在原空数组上做修改（比如用push往初始的空state数组里塞数据），没有给state设置一个全新的数组引用。这种操作下React根本检测不到数据变化，子组件不会触发重渲染，拿到的永远是初始传入的空数组，自然一直显示Loading。

父组件常见错误写法参考：

// 错误写法：直接修改原state，不会触发重渲染
const [ownerList, setOwnerList] = useState([])
useEffect(() => {
  fetch('/api/getOwners').then(res => res.json()).then(data => {
    data.forEach(item => ownerList.push(item)) // 直接改原数组，引用未变化
  })
}, [])

• 先修正父组件的状态更新逻辑，拿到接口数据后必须传入全新的数组引用更新state：

// 正确写法
const [ownerList, setOwnerList] = useState([])
useEffect(() => {
  fetch('/api/getOwners').then(res => res.json()).then(data => {
    setOwnerList(data) // 直接把新数组传给set方法，引用变化，触发重渲染
  })
}, [])

• 优化子组件的状态判断逻辑，不要用数组长度为0作为加载中的判断依据——否则如果某款车型真的没有绑定车主，加载完成后页面会一直卡Loading。建议单独传入加载状态标识，区分「加载中」「无数据」「有数据」三种状态：

export default function OwnersList({ ownerObjectsArray, isLoading }) {
  if (isLoading) {
    return <h2>Loading...</h2>
  }
  if (ownerObjectsArray.length === 0) {
    return <h2>该车型暂无认证车主</h2>
  }
  return (
    <div>
      {ownerObjectsArray.map((ownerObject) => (
        <div key={ownerObject.username}>
          <h3>{ownerObject.username}</h3>
          <button>contact</button>
        </div>
      ))}
    </div>
  )
}

• 不熟悉React的重渲染触发规则：不清楚引用类型数据的更新需要生成新引用，直接修改原数据不会被React检测到
• 没有建立不可变数据的开发意识：React开发中禁止直接修改原state、原props的值，所有更新都要基于原值生成新的副本
• 状态设计不合理：将空数据状态和加载中状态混为一谈，没有做边界场景区分

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