如何修复使用状态未更新?

Question

，我在ImageSlider上使用useState时遇到了问题。它没有更新，我不知道如何解决它。我尝试了所有方法并清理了代码。我的朋友也检查了我的代码，什么都没有。我安慰了它，它显示只是坚持第二张图像。我正在学习，所以如果我的错误非常基本，请原谅我。

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>

Answer 1

所以我们在这方面有一点工作要做。首先，我将为您提供固定代码，然后让我们谈谈您可以做得更好的地方。

function ImageSlider() {
const [choosen, setChoosen] = useState("");
const changeHandler = () => {    
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);
} 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[0].paragraph;
document.getElementById("imageSHeader").innerHTML =
text.ImageSliderText[0].header;
setChoosen(text.ImageSliderText[0].logo);
} else {
console.log("in here");
document.getElementById("imageSParagraph").innerHTML =
text.ImageSliderText[0].paragraph;
document.getElementById("imageSHeader").innerHTML =
text.ImageSliderText[0].header;
setChoosen(text.ImageSliderText[0].logo);
}
};
useEffect(() => {
setTimeout(() => changeHandler(), 4000);
console.log("hehe", choosen);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [choosen]);

问题：

1.(您的使用效果只运行一次。这就是 [] 的意思。方括号是放置要监视的变量的位置，然后在它们更改时重新运行此效果。因此，在更新的代码中，我在其中放置了 selectn(应该拼写为选择，但请随心所欲地称呼它(，因为这就是我们正在更新的内容。这样，它将在您每次设置选择时重新运行代码。因此，我们将把 setChoosen 从你的 useEffect 中删除，因为你在其他地方设置它。

2.( 数组中只有 4 个项目。尝试访问 [4] 将访问您离开的第 5 个元素，这将爆炸......您应该根据数据的当前长度使用索引。

3.(你没有在反应中思考。React 就是构建可重用的组件。以下是我如何重建滑块的示例。

建议：

1. 阅读 思考反应：https://reactjs.org/docs/thinking-in-react.html

2. 在 https://codesandbox.io/或其他游乐场上获取帐户 您可以键入代码并将其发送给人们以寻求帮助。

3. 继续练习
4. 以下是我为您整理的一个例子，向您展示一旦您花时间构建组件，如何轻松地重用它们来创建/修改您正在构建的旋转器： https://codesandbox.io/s/eloquent-pike-xklcj?file=/src/App.js