reactjs - React - 当组件重新渲染但数据相同时如何保持复选框选择？

Question

我有从标题打开（和关闭）onClick 的过滤器。过滤器内部是一个“显示所有结果”按钮，该按钮仅存在于移动设备上，而不存在于桌面上。在移动设备上，过滤器与整个主屏幕重叠（如模式）。当用户单击所述按钮“显示所有结果”时，过滤器模式关闭并显示结果。问题：当我再次单击标题中的“打开过滤器”按钮时，我过去的选择（复选框）消失了。看起来很高，但事实并非如此。我仍然看到过滤后的结果（这是正确的），只是复选框都被再次取消选中。发生这种情况是因为 FilterItem 组件每次都会重新渲染，并且状态（选中的属性）再次为 false。我尝试使用 React.Memo 并尝试考虑其他方法，但无法弄清楚如何去做。帮助会很棒。谢谢！！

import React from 'react';

const App = () =>{
  return (
    <div>
      <Header />
      <Main />
    </div>
  )
}

const Header = () => {
  const { state, dispatch } = React.useContext(StateContext)
  return (
    <div>
      <button onClick={()=> dispatch({type: "showFilters"})}>Open filters</button>
    </div>
  )
}

const Main = () => {
  //in this component the logic for fetching and filtering data happens. 
  //fetching --> filters
  const context = React.useContext(StateContext)
  const { state : {showFilters}} = context;
  return (
    <div>
      {
        showFilters && <Filters list={filters} showFilters={showFilters} />
      }    
    </div>
  );
};

const Filters = ({ list, showFilters }) => {
  return (
    <div>
    <ul>
      {list.map((item) => (
        <FilterItem item={item} />
      ))}
    </ul>
    //
    {showFilters && <button onClick={() => dispatch({type: "showFilters"})}>SHow all results</button>} //this has to be here as I also reuse Filters component without that Button (on desktop device vs mobile)
    
    </div>
  );
};

const FilterItem = ({ item }) => {
  const [checked, toggleCheckmark] = React.useState(true)
  const handleCheckBox = () => {
    toggleCheckmark(!checked)
  }
  return (
    <div>
      <button onClick={handleCheckBox}><CheckBox /></button>
      <li>{item.name}</li>
  </div>
  )
};

标签： reactjs