React中使用array.length获取投票数返回undefined如何解决

• 接口返回的likes为对象结构，对象原生不支持length属性，直接赋值给数组类型的blogVotes状态后，调用length会返回undefined，无法正常计数。
• useEffect依赖逻辑错误：blogVotes是effect内部更新的状态，加入依赖项会触发无限循环；同时React状态更新是异步的，调用setBlogData后立即读取blogData拿不到最新值。

先使用Object.values()将likes对象转换为数组，再赋值给状态，就能正常用length获取投票总数，同时修正useEffect的依赖与逻辑：

const blogItems = useSelector((state) => state.blogs);

const [blogData, setBlogData] = useState([]);
const [blogVotes, setBlogVotes] = useState([]);
useEffect(() => {
    setBlogData(blogItems);
    // 直接从最新的blogItems取值，规避状态更新异步问题
    const targetBlog = blogItems.items?.find(blog => blog.id === 1);
    // 对象转数组，无数据时兜底为空数组
    const formattedLikes = targetBlog?.likes ? Object.values(targetBlog.likes) : [];
    setBlogVotes(formattedLikes);
// 移除无效依赖，避免循环触发
}, [blogItems]);

渲染部分直接使用即可输出预期效果：

<p>Votes: {blogVotes.length}</p>

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