React/Material UI实现JSON FAQ点击显隐答案时，二次点击隐藏失效

你的交互失效来自两处逻辑错误，和一个调试误区：

• 状态赋值逻辑完全没考虑收起场景：不管当前点击是要展开还是收起答案，你都无条件执行setDisplayAnswer(faqdata[index].Answer)，哪怕把clickedIndex[index]的状态从true切为false，答案内容依然会被赋值到展示变量里，右侧自然永远不会隐藏。
• clickedIndex的状态更新逻辑有疏漏：原代码里更新状态时直接返回只含当前点击index的对象{[index]: !state[index]}，没有保留原有状态的其他键值对，会导致之前记录的选中状态全部丢失，虽然单选项场景下暂时不触发异常，但本身是错误写法。
• 调试误区：你打印的displayAnswer是上一次渲染的旧值，因为React状态更新是异步批处理的，调用set方法后不会立刻同步更新变量值，这也会让你误以为状态设置没有生效。

兼容原有状态结构的改法 #

调整点击事件的处理逻辑，在更新选中状态的时候，同步判断当前操作是展开还是收起，对应设置答案的展示内容：

const handleClick = (index) => () => {
  setClickedIndex((prevState) => {
    // 计算当前点击后的最新激活状态
    const nextActive = !prevState[index];
    // 根据激活状态设置展示内容：展开就放对应答案，收起就清空
    setDisplayAnswer(nextActive ? faqdata[index].Answer : '');
    // 返回合并了旧值的状态对象，避免丢失其他记录
    return {
      ...prevState,
      [index]: nextActive
    }
  });
};

更简洁的简化实现 #

如果你的交互是同一时间只展开一个问题，完全可以把冗余的对象状态替换成单值状态，逻辑会更清晰，也不会出现状态覆盖的问题：

// 状态直接记录当前激活的问题下标，无激活项时为null
const [activeIndex, setActiveIndex] = useState(null);
const [displayAnswer, setDisplayAnswer] = useState('');

const handleClick = (index) => () => {
  // 点当前已激活的项就收起，点其他项就切换展开
  if (activeIndex === index) {
    setActiveIndex(null);
    setDisplayAnswer('');
  } else {
    setActiveIndex(index);
    setDisplayAnswer(faqdata[index].Answer);
  }
};

对应渲染部分的图标判断可以同步调整为：

<ListItemIcon>
  {activeIndex === index ? <RemoveIcon /> : <AddIcon />}
</ListItemIcon>

如果需要在收起时完全隐藏答案区域的边框、占位空间，可以给右侧List加上基于展示值的样式判断：

<List
  style={{
    maxHeight: 430,
    width: 500,
    overflow: 'auto',
    border: displayAnswer ? '1px solid black' : 'none',
  }}
>
  <ListItem>{displayAnswer}</ListItem>
</List>

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