React中多MaterialUI Card组件同步变更问题求助

你的问题和key无关——key只是React用来识别列表元素唯一性的标识，不负责状态隔离。真正的问题是所有卡片共用了同一组状态变量，比如展开状态、Select选中值都是全局的，所以操作一个卡片时，所有依赖这些状态的组件都会同步变化。

解决核心是给每个卡片单独维护状态，具体操作如下：

1. 重构状态存储方式
   把原来的单个展开状态、选中值，改成用对象存储每个卡片的独立状态，键用卡片数据的唯一标识（比如你的item.id）：

   // 替换原来的expanded和selected状态
   const [cardStates, setCardStates] = useState({});
   

2. 修改展开/收起的事件处理
   给点击事件传入当前卡片的id，只更新对应卡片的展开状态：

   const handleExpandClick = (id) => {
     setCardStates(prevStates => ({
       ...prevStates,
       // 切换当前卡片的展开状态，默认未展开为false
       [id]: !prevStates[id]
     }));
   };
   

   然后在Card的展开组件中，绑定对应卡片的状态：

   <ExpandMore
     expand={cardStates[item.id] || false}
     onClick={() => handleExpandClick(item.id)}
   />
   

3. 修改Select的事件处理
   同样传入卡片id，只更新当前卡片的选中值：

   const handleSelectChange = (id, event) => {
     setCardStates(prevStates => ({
       ...prevStates,
       // 用`selected_${id}`作为键区分不同卡片的选中值
       [`selected_${id}`]: event.target.value
     }));
   };
   

   给Select绑定对应卡片的选中值：

   <Select
     value={cardStates[`selected_${item.id}`] || ''}
     onChange={(e) => handleSelectChange(item.id, e)}
   >
     {/* 选项内容 */}
   </Select>
   

这样每个卡片的状态都会独立存储、独立更新，就不会出现所有卡片同步变化的问题了。

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