, У меня проблема с useState на моем ImageSlider. Он не обновляется, и я не знаю, как это исправить. Я все перепробовал и почистил код. Мой друг тоже проверил мой код и ничего. Я утешил это, и он показывает, просто придерживаясь второго изображения. Я учусь, поэтому, пожалуйста, извините меня, если моя ошибка очень проста c.
import React, {
useState,
useEffect
} from 'react';
import text from './ImageSliderText'
function ImageSlider() {
const [choosen, setChoosen] = useState('')
const changeHandler = () => {
console.log(choosen)
if (text.ImageSliderText[0].logo === choosen) {
document.getElementById('imageSParagraph').innerHTML = text.ImageSliderText[1].paragraph;
document.getElementById('imageSHeader').innerHTML = text.ImageSliderText[1].header;
setChoosen(text.ImageSliderText[1].logo);
} else if (text.ImageSliderText[1].logo === choosen) {
document.getElementById('imageSParagraph').innerHTML = text.ImageSliderText[2].paragraph;
document.getElementById('imageSHeader').innerHTML = text.ImageSliderText[2].header;
setChoosen(text.ImageSliderText[2].logo);
console.log('after', choosen)
} else if (text.ImageSliderText[2].logo === choosen) {
document.getElementById('imageSParagraph').innerHTML = text.ImageSliderText[3].paragraph;
document.getElementById('imageSHeader').innerHTML = text.ImageSliderText[3].header;
setChoosen(text.ImageSliderText[3].logo);
} else if (text.ImageSliderText[3].logo === choosen) {
document.getElementById('imageSParagraph').innerHTML = text.ImageSliderText[4].paragraph;
document.getElementById('imageSHeader').innerHTML = text.ImageSliderText[4].header;
setChoosen(text.ImageSliderText[4].logo);
} else {
document.getElementById('imageSParagraph').innerHTML = text.ImageSliderText[0].paragraph;
document.getElementById('imageSHeader').innerHTML = text.ImageSliderText[0].header;
setChoosen(text.ImageSliderText[0].logo);
}
setTimeout(() => changeHandler(), 4000)
}
useEffect(() => {
setChoosen('tak')
setTimeout(() => console.log('hehe', choosen), 4000)
// changeHandler()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
return ( <
div className = 'imageSlider' >
<
div className = 'imageSlider__textContainer' >
<
div className = 'imageSlider__textbox' >
<
p id = 'imageSParagraph'
className = 'imageSlider__textbox--paragraph' > {
text.ImageSliderText[0].paragraph
} < /p> <
p id = 'imageSHeader'
className = 'imageSlider__textbox--header' > {
text.ImageSliderText[0].header
} < /p> <
/div> <
/div> <
div className = 'imageSlider__logoContainer' > {
text.ImageSliderText.map((element, index) => {
return ( <
div className = 'imageSlider__imagebox'
key = {
index
} >
<
img style = {
{
opacity: choosen === element.logo ? '1' : '0.3'
}
}
src = {
element.logo
}
alt = 'logo'
className = 'imageSlider__imagebox--image' / >
<
/div>
)
})
} <
/div> <
/div>
)
}
export default ImageSlider
Here is other file with text.
import logo1 from '../../Images/dun.png'
import logo2 from '../../Images/frog.png'
import logo3 from '../../Images/green.png'
import logo4 from '../../Images/story.png'
export default {
ImageSliderText: [{
logo: logo1,
paragraph: '"Uneasy barton seeing remark happen his has. Am possible offering at contempt mr distance stronger an. Attachment excellence announcing or reasonable am on if indulgence. Exeter talked in agreed spirit no he unable do. "',
header: 'Olivia Malerse, Dun Dunder'
},
{
logo: logo2,
paragraph: '"Greatest properly off ham exercise all. Unsatiable invitation its possession nor off. All difficulty estimating unreserved increasing the solicitude."',
header: 'Joseph Redmaye'
},
{
logo: logo3,
paragraph: '"Among ready to which up. Attacks smiling and may out assured moments man nothing outward. Thrown any behind afford either the set depend one temper."',
header: 'Meda Watson'
},
{
logo: logo4,
paragraph: '"And can event rapid any shall woman green. Hope they dear who its bred. Sm iling nothing affixed he carried it clothes calling he no."',
header: 'Daniel Quentin'
}
]
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>