Если всегда выполняется условие (зацепки, состояние реакции) - PullRequest
0 голосов
/ 19 января 2020

Когда пользователь нажимает на значок «вверх», он вызывает функцию, которая добавляет +1 к числу лайков. Он использует условие, которое проверяет состояние, чтобы увидеть, было ли оно нажато, чтобы ограничить бесконечное количество нажатий.

Если я поместил значок thumbs up 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

1 Ответ

0 голосов
/ 19 января 2020

Во-первых, если вы используете какие-либо вещи внутри ваших эффектов, они должны быть указаны в массиве зависимостей. Вы можете использовать это для рисования https://www.npmjs.com/package/eslint-plugin-react-hooks.

После изменения кода в соответствии с этими правилами он заработал, как вы ожидали.

Edit hooks

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...