Как исправить, что useState не обновляется? - PullRequest
0 голосов
/ 29 мая 2020

, У меня проблема с 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>

1 Ответ

0 голосов
/ 29 мая 2020

Итак, нам нужно немного поработать над этим. Сначала я дам вам фиксированный код, а затем давайте поговорим о том, что вы можете сделать лучше.

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.) Ваш useEffect запускается только один раз. Вот что означает []. В квадратных скобках вы помещаете переменные, которые хотите отслеживать, а затем, когда они изменятся, повторно запустите этот эффект. Итак, в обновленном коде я поставил choosen (следует писать selected, но назовите его как хотите), поскольку это то, что мы обновляем. Таким образом, он будет повторно запускать код каждый раз, когда вы устанавливаете Chhoosen. Итак, мы собираемся убрать 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
...