useState未按预期更新状态：FAQ手风琴图标切换正常但答案未切换展示

1. 首要修复：React导入语法错误 #

代码中的React导入写法存在错误，React为默认导出项，不可放入命名导出的花括号中：
错误写法：
import {React,useState} from 'react'
正确写法：
import React, { useState } from 'react'
React版本迭代后对导入语法的校验会更加严格，错误的导入会触发状态更新时部分DOM渲染逻辑异常，这是最符合「图标正常切换但答案不展示」故障现象的诱因。

2. 其他排查方向 #

如果修改导入后故障仍未复现，可按以下顺序排查：

• 检查全局样式或组件样式是否给<p>标签、.card下的内容设置了display: none、visibility: hidden、height: 0、overflow: hidden类规则，答案被样式隐藏是第二高发问题
• 在答案渲染位置添加调试逻辑验证状态：将{ show && <p>{answer}</p> }改为{ show ? <p>{answer}</p> : <p>隐藏占位</p> }，确认状态切换时对应位置内容是否正常更新
• 检查父组件调用AccordianCard时是否正确传入了answer属性，若answer为undefined或空字符串，状态切换后也无法看到内容
• 确认Font Awesome图标库引入正常，图标切换正常仅代表对应依赖生效，不代表其他依赖无异常

修复后完整参考代码 #

import React, { useState } from 'react'

const AccordianCard = ({question, answer}) => {
  const [show, setShow] = useState(false);

  return (
    <div className="card" >
      <div className="question_heading">
        <h3>{question}</h3>
        <button onClick={() => setShow(!show)}>
          { show ? <i className="fas fa-minus"></i> : <i className="fas fa-plus"></i> } 
        </button>
      </div>
      { show && <p>{answer}</p> }
    </div>
  )
}

export default AccordianCard

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