时间戳

首页 > 解决方案 > 状态未使用 useState 设置方法更新

javascript - 状态未使用 useState 设置方法更新

问题描述

我正在尝试学习钩子并尝试使用 onMouseEnter 和 Leave 事件更新状态，但状态isFlip.flipStat不会改变，它用于使用 ReactCardFlip 组件翻转卡片的标志。这里唯一的问题是当handleMouse函数触发时我的状态没有改变，也许任何人都可以提供帮助。提前致谢。

这是我的代码：

function OurServices() {
  const [isFlip, setFlip] = useState([])
  const listServices = [
    {
      "title": "title",
      "img": "img.jpg",
      "desc": "lorem ipsum"
    }
  ]
  
  function handleMouse(key) {
    let newArr = [...isFlip]
    newArr[key].flipStat = !newArr[key].flipStat
    setFlip(newArr)
  }

  useEffect(() => {
    listServices.map((x) => (
      x.flipStat = false
    ))
    setFlip(listServices)
  })
             return (
               {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>
                ))}
               )```

标签： javascriptreactjsreact-hooks

解决方案

第一个问题出在你的 useEffect 中，

useEffect(() => {
   listServices.map((x) => (
       x.flipStat = false
   ))
   setFlip(listServices)
})

您设置listServices为 isFlip 数组。但是 Array.map() 方法不会更新源数组。你需要这样写，

useEffect(() => {
   const updatedArr = listServices.map((x) => (
       x.flipStat = false
       return x;
   ))
   setFlip(updatedArr)
})

您可以在这一行之后记录 newArrlet newArr = [...isFlip]并查看该数组是否包含所有项目吗？它应该可以帮助您调试问题。

更新： 尝试在设置状态时创建新数组，

function handleMouse(key) {
   let newArr = [...isFlip]
   newArr[key].flipStat = !isFlip[key].flipStat
   setFlip([...newArr])
}

推荐阅读