React useRef ： Null (无法读取 null 的属性'children')

Question

我正在尝试创建一个React应用程序，显示电影列表，对于每部电影，它显示看过它的用户，如果没有用户看过它，默认文本将被放置，说明没有用户看过它，

创建列表后，我尝试了获取无序列表的ref并检查它是否是子列表的方法。长度== 0，则默认文本将被放置为单个List项，

我试过的代码:

import React, { useRef } from "react";
function MoviesCard(props, ref) {
const usersLists = useRef(null);
// console.log(usersLists.currnet.children[1]);
return (
<li>
<h2>{props.movieName}</h2>
<p>liked by:</p>
<ul ref={usersLists}>
{props.profiles.map((profile) => {
if (profile.favoriteMovieID == props.movieId) {
return (
<li key={props.users[profile.id].name}>
{props.users[profile.id].name}
</li>
);
}
if (usersLists.current.children.length === 0) {
return <li>None of the current users liked this movie</li>;
}
})}
</ul>
{console.log(usersLists.current.children.length)}
</li>
);
}
export default MoviesCard;

问题:当保存项目时，当我在浏览器上查看它时，出现以下问题:

TypeError: Cannot read property 'children' of null

我知道ref直到函数返回和内容呈现之后才设置，这使得使用useRef操纵DOM会产生问题，是否有替代方法或方法来制作useRef。在UI呈现之前更新它的值，并保持观察和更新?

Answer 1

解决方案之一如下:

import React from "react";
function MoviesCard(props) {
const { profiles = [], movieName, movieId, users } = props;
let totalLiLength = 0;
return (
<li>
<h2>{movieName}</h2>
<p>liked by:</p>
<ul>
{profiles.map((profile) => {
if (profile.favoriteMovieID === movieId) {
totalLiLength++;
return (
<li key={users[profile.id].name}>{users[profile.id].name}</li>
);
}
})}
{totalLiLength === 0 && (
<li>None of the current users liked this movie</li>
)}
</ul>
</li>
);
}
export default MoviesCard;

Answer 2

请尝试下面的代码

import React, { useRef } from "react";
function MoviesCard(props, ref) {
const usersLists = useRef(null);
const profileIds = props.profiles.reduce((arr, profile) => {
if(profile.favoriteMovieID == props.movieId){
arr.push(profile.id);
}
return arr;
}, []);
return (
<li>
<h2>{props.movieName}</h2>
<p>liked by:</p>
<ul ref={usersLists}>
{profileIds.map((profileId) => <li key={profileId}>{props.users[profileId].name}</li>)}
{profileIds.length === 0 && <li>None of the current users liked this movie</li>}
</ul>
</li>
);
}
export default MoviesCard;