React中MUI单选按钮点击后获取旧值问题求助

核心问题分析 #

1. 状态变量拼写不一致：渲染时使用的filterdMovie与状态更新函数setFileredMovies的变量名拼写错误（正确统一应为filteredMovies），导致组件无法响应状态变化。
2. 不必要的默认行为阻止：e.preventDefault()会干扰单选按钮的事件传递，可能导致值获取异常。
3. Owl Carousel未触发重新渲染：过滤结果更新时，Carousel未重新初始化，导致展示旧数据。

修正步骤及代码示例 #

1. 统一状态变量拼写

确保状态定义、更新和渲染使用同一变量名：

// 状态定义示例
const [filteredMovies, setFilteredMovies] = useState(onlineMovies);

2. 修正movieTypeChange函数

移除e.preventDefault()，并用filter简化过滤逻辑：

const movieTypeChange = (e) => {
  const value = e.target.value;
  setMovieType(value);

  switch(value) {
    case "1":
      setFilteredMovies(onlineMovies);
      break;
    case "2":
      setFilteredMovies(onlineMovies.filter(movie => !movie.upcoming));
      break;
    case "3":
      setFilteredMovies(onlineMovies.filter(movie => movie.upcoming));
      break;
    default:
      setFilteredMovies(onlineMovies);
  }
};

3. 强制Owl Carousel重新渲染

给Owl Carousel添加key属性，绑定到筛选类型或过滤结果，触发组件重新初始化：

{filteredMovies.length > 0 ? (
  <OwlCarousel
    key={movieType} // 绑定key确保筛选值变化时重新渲染
    className="owl-theme"
    loop={movieCount}
    center={movieCount}
    margin={1}
    autoplay={true}
    dots={false}
    items={3}
    touchDrag={true}
    lazyLoad={true}
    responsive={state.responsive}
    animateOut="fadeOut"
  >
    {/* 电影项渲染代码保持不变 */}
  </OwlCarousel>
) : (
  <Stack direction="column" justifyContent="center" alignItems="center">
    <img src={notFound} alt="" width="50%" />
    <h4>No Movies Found</h4>
  </Stack>
)}

4. 修正渲染变量名

将所有filterdMovie替换为filteredMovies，确保与状态变量完全一致。

关键说明 #

• React的setState是异步操作，但这里直接使用e.target.value处理过滤，异步特性不会影响结果，核心问题为变量拼写错误和Carousel的渲染机制。
• 使用filter方法替代forEach，代码更简洁且避免手动维护数组的冗余操作。

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