ReactJS修改变量不触发重渲染问题求助（Prismic.io场景）

核心原因 #

React触发组件重渲染的前提是状态引用发生变化。如果你的filter操作直接修改了原cases数组（比如用splice、push等原地修改方法），或者返回的过滤后数组和原数组引用一致，React会判定状态没有变化，从而跳过重渲染。

具体修复方案 #

1. 确保filter返回新数组，不修改原状态 #

别直接改原cases状态，用filter生成全新数组后再更新状态：

// 错误写法：直接修改原数组，不会触发重渲染
const handleFilter = () => {
  cases.splice(0, 1);
  setCases(cases);
};

// 正确写法：生成新数组更新状态
const handleFilter = () => {
  const filteredCases = cases.filter(item => item.category !== '要移除的分类');
  setCases(filteredCases);
};

2. 瀑布流组件的特殊处理 #

如果用第三方瀑布流库（比如react-masonry-css），有时候状态更新了但布局没刷新，可试试这两种方法：

• 给瀑布流容器加key属性，过滤后的数组变化时更新key，强制组件重新挂载：

const [filteredCases, setFilteredCases] = useState(cases);

const handleFilter = () => {
  const newCases = cases.filter(item => /* 过滤条件 */);
  setFilteredCases(newCases);
};

return (
  <Masonry key={filteredCases.length}>
    {filteredCases.map(item => /* 渲染条目 */)}
  </Masonry>
);

• 如果是自己写的瀑布流逻辑，在useEffect里监听过滤后数组的变化，触发重新布局：

useEffect(() => {
  // 调用你的瀑布流布局计算函数，比如重新计算每个条目的位置、高度
  calculateMasonryLayout();
}, [filteredCases]);

3. 修正useRef的误用 #

如果用useRef存cases数据，要保证状态更新后同步更新ref的值，不然ref里会一直是旧数据：

const casesRef = useRef(cases);

useEffect(() => {
  casesRef.current = cases; // 状态更新时同步ref内容
}, [cases]);

const handleFilter = () => {
  const filtered = casesRef.current.filter(/* 过滤条件 */);
  setCases(filtered);
};

验证要点 #

• 检查filter操作是不是返回了全新数组，而非修改原数组
• 确认状态更新后，cases的引用确实变了（可以在组件里打印新旧数组的===比较结果）
• 瀑布流组件有没有感知到子元素数量/内容的变化，必要时用key强制刷新

内容的提问来源于stack exchange，提问作者Mihai Andrei Checiu