React中使用useState的set方法更新状态未生效问题求助

问题原因与修复方案 #

核心问题点 #

• useEffect未添加空依赖数组，每次组件重渲染都会触发执行，会将所有卡片的flipStat重置为false，直接覆盖了你在handleMouse中更新的状态，这是状态看起来没有变更的根本原因。
• 原状态更新逻辑仅对数组做了浅拷贝，数组内的对象仍复用原有引用，可能导致React无法正确检测到状态变更。
• 直接修改了组件内定义的常量listServices的属性，不符合不可变数据原则，且return的JSX缺少外层根节点，存在语法问题。

修复后完整代码 #

function OurServices() {
  const [isFlip, setFlip] = useState([])
  const listServices = [
    {
      "title": "title",
      "img": "img.jpg",
      "desc": "lorem ipsum"
    }
  ]
  
  function handleMouse(key) {
    // 采用函数式更新 + 不可变数据修改，保证状态更新可被检测
    setFlip(prevFlipList => {
      return prevFlipList.map((item, index) => 
        index === key ? {...item, flipStat: !item.flipStat} : item
      )
    })
  }

  // 添加空依赖数组，仅在组件挂载时执行一次初始化
  useEffect(() => {
    // 生成新数组，不修改原listServices常量
    const initList = listServices.map(item => ({
      ...item,
      flipStat: false
    }))
    setFlip(initList)
  }, [])

  return (
    // 增加外层根节点，修正JSX语法错误
    <>
      {isFlip.map((x, key) => (
        <div key={key} onMouseEnter={() => handleMouse(key)} onMouseLeave={() => handleMouse(key)}>
          <div className={styles.card} >
            <div className={styles.card_body+" p-xl-0 p-lg-0 p-md-1 p-sm-1 p-0"}>
              <ReactCardFlip isFlipped={x.flipStat} flipDirection="horizontal">
                <div className="row">
                  <div className={"col-xl-12 text-center "+styles.services_ic}>
                    <img className="img-fluid" src={x.img} width="72" height="72" alt="data-science" />
                  </div>
                  <div className={"col-xl-11 mx-auto text-center mt-4 "+styles.services_desc}>{x.title}</div>
                </div>
                
                <div className="row">
                  <div className={"col-xl-12 text-center "+styles.services_ic}>
                    {parse(x.desc)}
                  </div>
                </div>
              </ReactCardFlip>
            </div>
          </div>
        </div>
      ))}
    </>
  )
}

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