如何在React的map函数中使用toggle，解决点击两次才生效问题

问题根因 #

你所有列表项的切换逻辑共用了同一个全局状态partToggle，这是核心错误：

• 每次点击任意列表项都会修改全局的partToggle值，下一次点击其他列表项时，取反的是上一次修改后的全局值，和当前点击项自身的itemPartToggle状态完全不匹配
• 比如你点击A项把partToggle改成true，A项的itemPartToggle设为true，紧接着点击B项，此时全局partToggle取反为false，B项的itemPartToggle就会被设为false，自然看起来没反应，第二次点击才会变成true，就出现了需要点击两次的问题

修复方案 #

直接删掉无用的全局partToggle状态，切换时直接读取当前点击项自身的itemPartToggle属性取反即可，修改后的onAddPartSelect逻辑如下：

const onAddPartSelect = (i) => {
  const updatedData = people.map((item, idx) => {
    if (idx === i) {
      return {
        ...item,
        // 直接用当前项自身的状态取反，不需要依赖全局状态
        itemPartToggle: !item.itemPartToggle
      };
    }
    return item;
  });
  setPeople(updatedData);
};

如果初始化时people数据里没有itemPartToggle字段，最好在请求到数据后给每个项加个默认值false，避免初始取值为undefined的问题：

useEffect(() => {
  axios.get("./data.json").then((res) => {
    const initPeople = res.data.people.map(item => ({
      ...item,
      itemPartToggle: false
    }))
    setPeople(initPeople);
  });
}, []);

优化建议 #

如果有频繁点击的场景，建议使用状态的函数式更新方式，确保每次修改都基于最新的people状态，避免闭包导致的状态更新异常：

const onAddPartSelect = (i) => {
  setPeople(prevPeople => prevPeople.map((item, idx) => {
    if (idx === i) {
      return {
        ...item,
        itemPartToggle: !item.itemPartToggle
      };
    }
    return item;
  }));
};

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