React useRef报Cannot read property 'children' of null错误如何解决

你完全不需要通过操作DOM判断列表是否为空，React是数据驱动框架，直接基于传入的props数据提前计算要渲染的内容即可，这是最稳定且符合React设计规范的实现方式。

修正后代码 #

import React from "react";

function MoviesCard(props) {
  // 提前过滤出喜欢当前电影的用户列表
  const likedUsers = props.profiles
    .filter(profile => profile.favoriteMovieID == props.movieId)
    .map(profile => props.users[profile.id].name);

  return (
    <li>
      <h2>{props.movieName}</h2>
      <p>liked by:</p>
      <ul>
        {likedUsers.length > 0 ? (
          likedUsers.map(userName => (
            <li key={userName}>{userName}</li>
          ))
        ) : (
          <li>None of the current users liked this movie</li>
        )}
      </ul>
    </li>
  );
}

export default MoviesCard;

原错误原因说明 #

• 你在组件渲染JSX的过程中访问ref的值，此时ul元素还没有被挂载到DOM树上，usersLists.current 初始值为null，访问null.children自然会抛出类型错误。
• 即使后续DOM挂载完成ref被赋值，你原来的逻辑也存在问题：在map遍历每一个profile时都会判断DOM长度，会重复渲染多条默认提示文本，不符合需求。

关于useRef的补充说明 #

没有办法让useRef在UI渲染前就拿到DOM元素的引用，因为DOM元素是在组件的JSX被渲染、提交到DOM树之后才会生成的。如果一定要用ref实现，需要配合useEffect监听props数据变化，在DOM更新完成后再判断列表长度、手动更新状态控制默认提示的展示，但是这种方案需要多维护一个状态，性能和可维护性都远不如直接基于数据判断的方案，不推荐使用。

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