React中如何按条件显示/隐藏评分≥60的JSON电影数据

核心需要做三处调整：兼容处理数据集中格式不统一的观众评分字段、修正现有接口数据赋值的逻辑问题、在筛选规则中增加评分阈值判断。

1. 统一解析不同格式的评分值 #

你的数据集里viewer_rating存在两种存储格式：纯数字（比如54/68）、带百分号的字符串（比如"42%"），直接做数值比较会触发类型错误，先在组件内部写一个评分解析工具函数，和状态声明逻辑平级即可：

// 把不同格式的评分统一转换为可比较的数值
const parseViewerRating = (ratingVal) => {
  if (typeof ratingVal === 'number') return ratingVal;
  if (typeof ratingVal === 'string') return Number(ratingVal.replaceAll('%', ''));
  // 格式异常的评分默认按0处理，直接过滤
  return 0;
};

2. 修正接口返回数据的赋值逻辑 #

你请求的接口返回结构是{ movies: [电影条目数组] }，但现有代码直接把整个返回对象赋值给了items状态，会导致后续遍历逻辑出错，修改useEffect中请求成功的回调代码：

.then(
  (result) => {
    setLoaded(true);
    // 直接提取返回结构中的movies数组赋值给状态
    setItems(result.movies);
  },
  (error) => {
    setLoaded(true);
    setError(error);
  }
);

对应把后面的const data = Object.values(items);直接修改为const data = items;即可，此时items已经是标准的电影条目数组，不需要再做对象值提取。

3. 在筛选逻辑中增加评分阈值判断 #

修改现有的search筛选函数，新增评分≥60的判断条件，和已有的类型筛选、关键词搜索条件取交集：

function search(items) {
  return items.filter((item) => {
    const currentRating = parseViewerRating(item.viewer_rating);
    // 同时满足三个条件才保留条目：评分≥60、匹配选中的分类、匹配搜索关键词
    return currentRating >= 60
      && item.genre.includes(filter)
      && item.title.toString().toLowerCase().includes(query);
  });
}

效果说明 #

修改完成后，评分54的《Spiderhead》、评分42的《THE MAN FROM TORONTO》会被自动过滤隐藏，只有评分68的《Public Enemies》会在列表中正常渲染。后续新增的电影条目只要观众评分低于60都会被自动隐藏，解析逻辑同时兼容数字、百分号字符串两种评分格式，不会出现判断异常。

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