如果有条件始终运行（挂钩，反应状态）

Question

当用户单击竖起大拇指的图标时，它将调用一个函数，该函数将点赞次数增加+1。它使用条件检查条件来查看其是否已被按下，以限制无数次按下。

如果我将大拇指图标div放在映射函数中，则条件语句将中断，并且if语句将始终运行。

那是为什么？

此代码有效：

import React, { useState } from 'react'

const VideoPage = () => {
  const [state, setState] = useState({
    loading: true,
    error: false,
    thumbsUp: false,
    thumbsDown: false
  })

  const thumbsUpClicked = () => {
    if (state.thumbsUp === false) {
      let thumbsUpText = document.querySelector('.videoPage-video-options-thumbsUp-text')
      thumbsUpText.innerHTML = Number(thumbsUpText.innerHTML) + 1
      setState(prevState => ({...prevState, thumbsUp: true}))
    }
    else return null
  }

  return (
    <div 
      className={`videoPage-video-options-thumbsUp`}
      onMouseDown={() => thumbsUpClicked()}>
      <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M198 448h172c15.7 0 28.6-9.6 34.2-23.4l57.1-135.4c1.7-4.4 2.6-9 2.6-14v-38.6c0-21.1-17-44.6-37.8-44.6H306.9l18-81.5.6-6c0-7.9-3.2-15.1-8.3-20.3L297 64 171 191.3c-6.8 6.9-11 16.5-11 27.1v192c0 21.1 17.2 37.6 38 37.6zM48 224h64v224H48z"/>
      </svg> &nbsp; 
      <span className={`videoPage-video-options-thumbsUp-text`}>50</span>
    </div>
  )
}

export default VideoPage

此代码不：

import React, { useState, useEffect } from 'react'

const VideoPage = () => {
  const [state, setState] = useState({
    loading: true,
    error: false,
    thumbsUp: false,
    thumbsDown: false
  })

  useEffect(() => {
    someFunction()
  }, [])

  const someFunction = () => {
    const mappedThumb = [0].map(item => {
      return (
        <div 
          className={`videoPage-video-options-thumbsUp`}
          onMouseDown={() => thumbsUpClicked()}>
          <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M198 448h172c15.7 0 28.6-9.6 34.2-23.4l57.1-135.4c1.7-4.4 2.6-9 2.6-14v-38.6c0-21.1-17-44.6-37.8-44.6H306.9l18-81.5.6-6c0-7.9-3.2-15.1-8.3-20.3L297 64 171 191.3c-6.8 6.9-11 16.5-11 27.1v192c0 21.1 17.2 37.6 38 37.6zM48 224h64v224H48z"/>
          </svg> &nbsp; 
          <span className={`videoPage-video-options-thumbsUp-text`}>50</span>
        </div>
      )
    })
    setState(prevState => ({...prevState, mappedThumb: mappedThumb}))
  }


  const thumbsUpClicked = () => {
    if (state.thumbsUp === false) {
      let thumbsUpText = document.querySelector('.videoPage-video-options-thumbsUp-text')
      thumbsUpText.innerHTML = Number(thumbsUpText.innerHTML) + 1
      setState(prevState => ({...prevState, thumbsUp: true}))
    }
    else return null
  }

  return (
    <div>
      <div>{state.mappedThumb}</div>
    </div>
  )
}

export default VideoPage

Answer 1

首先，如果要在Effects中使用任何东西，则应在依赖项数组中指定它们。您可以使用它来整理https://www.npmjs.com/package/eslint-plugin-react-hooks。

更改代码以遵循这些规则后，它可以按预期工作。