React组件初始渲染props为空值，刷新显示空数组问题求助

组件初始渲染时，user的状态是你设置的初始值[]，而useEffect里的异步请求（比如接口调用）是在组件挂载完成后才执行的，请求还没返回结果时，user依然是空数组，所以传给子组件的props自然是空数组，控制台就会输出{user: Array(0)}。

方案1：子组件内判断数据状态再渲染 #

在UserHomePage组件里，先判断user是否有数据，没有的话显示加载状态，有数据再渲染内容：

function UserHomePage(props) {
  const { user } = props;
  console.log(props);

  // 数组为空时显示加载提示
  if (!user.length) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      {/* 这里替换成你的用户信息渲染逻辑 */}
      <h2>欢迎，{user[0].username}</h2>
    </div>
  );
}

方案2：父组件控制子组件渲染时机 #

在App.js里，等user有数据后再渲染UserHomePage，否则显示加载状态：

function App() {
  const [user, setUser] = useState([])
  const token = localStorage.getItem('mytoken')
  let navigate = useNavigate()
  
  useEffect(() => {
        // 这里是你的异步请求逻辑
        .then(result => setUser(result))
      },[token])

    return (
    <div>
      <Header user = {user}/>
      <Routes>
        <Route>
          <Route 
            path='/homepage' 
            element={
              user.length ? <UserHomePage user={user}/> : <div>加载中...</div>
            } 
          />
        </Route>
      </Routes>
    </div>
  );
}

方案3：调整初始状态区分未加载状态 #

把user的初始值设为null，这样能更清晰区分“未加载”和“加载后无数据”的情况：

function App() {
  const [user, setUser] = useState(null) // 初始设为null
  const token = localStorage.getItem('mytoken')
  let navigate = useNavigate()
  
  useEffect(() => {
        // 异步请求逻辑
        .then(result => setUser(result))
      },[token])

    return (
    <div>
      <Header user={user || []}/> {/* 给Header传空数组兜底 */}
      <Routes>
        <Route>
          <Route 
            path='/homepage' 
            element={
              user ? <UserHomePage user={user}/> : <div>加载中...</div>
            } 
          />
        </Route>
      </Routes>
    </div>
  );
}

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