Когда пользователь нажимает на значок «вверх», он вызывает функцию, которая добавляет +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>
<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>
<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