Как передать состояние в jsx, отобразить его и обновить при изменении состояния?

#javascript #reactjs #function #variables

Вопрос:

Я новичок в реагировании, но мне это очень нравится. Я хотел добавить генератор забавных фактов в раздел «Обо мне» своего портфолио и придумал, как заставить его работать через консоль, но мне не повезло передать сгенерированный факт в return() часть моего компонента.

Я хотел бы записывать содержимое переменной funFactoid на странице каждый раз, когда пользователь нажимает на кнопку, например, с помощью a <p> -тега.

В настоящее время так выглядит мой код (я удалил части, не имеющие отношения к моему вопросу).:

 function About(props) {

  function funFact() {

    function randomIntFromInterval(min, max) { 
      return Math.floor(Math.random() * (max - min   1)   min)
    }

    const randomNumber = randomIntFromInterval(0, 4);

    const factArray = ["A", "B", "C", "D", "E"];

    console.log(factArray[randomNumber]);
    let funFactoid = factArray[randomNumber];
  }

  return (
    <div>
      
      <button onClick={funFact}>Click me for a fun fact!</button>
      <p>{ funFactoid }</p>

    </div>
  )
}
 
export default About;

Я уверен, что это до смешного легко исправить, но я самоучка, поэтому, вероятно, просто пропустил какую-то важную часть, объясняющую, как это сделать.

Заранее спасибо за помощь мне! Это первый раз, когда я столкнулся с проблемой кодирования, которую не смог решить с помощью Гугла, поэтому я очень благодарен за любую помощь.

Ответ №1:

Var let funFactoid не находится в той же области, что и ваша функция возврата, за исключением того, что вы не должны использовать let, но хук useState для установки значений, которые вы хотите отобразить:

 function About(props) {

  const [funFactiod, setFunFactoid] = useState("")

  function funFact() {

    function randomIntFromInterval(min, max) { 
      return Math.floor(Math.random() * (max - min   1)   min)
    }

    const randomNumber = randomIntFromInterval(0, 4);

    const factArray = ["A", "B", "C", "D", "E"];

    console.log(factArray[randomNumber]);
    setFunFactoid(factArray[randomNumber]);
  }

  return (
    <div>
      
      <button onClick={funFact}>Click me for a fun fact!</button>
      <p>{ funFactoid }</p>

    </div>
  )
}
 
export default About;

1. Ух ты, спасибо тебе огромное! Не могу поверить, что я это пропустил. Мне все еще нужно кое-что почитать в документации, я думаю 😉

2. Не за что! Если бы вы могли сделать всем нам одолжение и отметить ответ как правильный, это было бы потрясающе!

3. Если вы не возражаете, я попробовал это решение, но оно не сработало для меня. Вы случайно не знаете, почему в нем говорится funfactoid, setFunFactoid , что он объявлен, но никогда не читается и setFunFactoid не определен в функции? Я импортировал useState из React, но, возможно, мне все еще чего-то не хватает

4. Итак, во-первых , я написал funFactiod и нет funFactoid , так что измените это. И для второй ошибки вам нужно изменить setFunfactoid(factArray[randomNumber]) на setFunFactoid(factArray[randomNumber]) (в верхнем регистре)

Ответ №2:

У меня было только одно предложение

 function randomIntFromInterval(min, max) { 
  return Math.floor(Math.random() * (max - min   1)   min)
}

function funFact() {

const factArray = ["A", "B", "C", "D", "E"];

const lastIndex = factArray.length - 1

const randomNumber = randomIntFromInterval(0, lastIndex);

console.log(factArray[randomNumber]);
setFunfactoid(factArray[randomNumber]);
 
}

Вы можете добавить lastIndex переменную, чтобы избежать ошибок, чтобы вы могли изменять массив, не беспокоясь о максимальном числе.