Почему рандом в React работает так странно?

Question

[funkydance]

Здравствуйте.
Нужно получать каждый раз рандомное число от 1 до 10. Написал функцию и вывожу результат внутрь render, но сталкиваюсь с тем, что рандомное число всегда одно и тоже. Думал, что я неправильно написал функцию, но взял пример с MDN выдаёт тоже всегда одно число.

function randomInteger(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}
let rands = randomInteger(1, 10);

Полный код

/* @flow */
import React from "react";
import { stringify as b } from "rebem-classname";
import { withLocalize } from "react-localize-redux";
import { Translate } from 'react-localize-redux';
import "./End.scss";

const block = "end";

function randomInteger(min, max) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

let rands = randomInteger(1, 10);

class End extends React.PureComponent {

  props: {
    state: "WAITING" | "COUNTDOWN" | "CULMINATION" | "ENDED",
    winnerTicket: number,
    winner: ?{ id: number, username: string, avatar: string },
  };
      
  render() {
  const { state, winnerTicket, winner } = this.props;
    if (state === "ENDED") {
      status = (
        new Audio(`/sound/mainmenu.mp3`).play()
      );
    }

  return (
  <div className={b({ block, mods: { show: state === "ENDED" && !!winner } })}>
    <div  className={b({ block, elem: "winners" })}>
    <div className={b({ block, elem: "avatar" })}>
      <img className={b({ block, elem: "avatar-win" })} src={winner && winner.avatar} alt=""/>
    </div>
      <div className={b({ block, elem: "winners-info" })}>
        <div className={b({ block, elem: "winners-name" })}>
        &nbsp;
          <Translate>
            {({ translate }) => <lang>{translate("game.end")}</lang>}
          </Translate>
          </div>
        <div className={b({ block, elem: "winners-ticket" })}>
        <Translate>
            {({ translate }) => <lang>{translate("game.endticket")}</lang>}
        </Translate>
        : #{winnerTicket},
        &nbsp;
        <Translate>
            {({ translate }) => <lang>{translate("game.endticketwin")}</lang>}
        </Translate>
        <div className={b({ block, elem: "sound-win"})}>
          <img className={b({ block, elem: "image-win"})} src={`/sound/image/1.png`} />
          <span className={b({ block, elem: "sound-name"})}>{rands}</span>
        </div>
        </div>
      </div>
      <div className={b({ block, elem: "winners-footer" })}>
      <Translate>
        {({ translate }) => <lang>{translate("game.endwin")}</lang>}
      </Translate>
      &nbsp;
      <Translate>
        {({ translate }) => <lang>{translate("game.enddid")}</lang>}
      </Translate> ACE,&nbsp;
      <Translate>
        {({ translate }) => <lang>{translate("game.endkill")}</lang>}
      </Translate>!</div>
    </div>

  </div>
);
}
}
export default withLocalize(End);

Comments

[0xD34F]

Всё работает как и должно, не говорите ерунды. Лучше бы показали более полный пример кода - чтобы стало видно, как вы НЕ обновляете стейт.

[funkydance]

0xD34F, Обновил топик, добавил полный код. По поводу стейта не очень понимаю как он работает, так как не вникся ещё в Реакт. Делаю для себя по необходимости, поэтому не ругайтесь)

[0xD34F]

funkydance,

не ругайтесь)

Ну окей, окей - раз моя помощь вам не нужна, подсказывать не буду.

[funkydance]

0xD34F, ммм.... так я вроде не отказывался от помощи(

[Lynn «Кофеман»]

Всё по классике

Answer 1

[Somewhere Intech]

Есть более простое описание этой функции:

const rand=(min, max)=>Math.floor(Math.random() * max) + min;

for (i=0; i<10;i++) console.log(rand(1,10))
Console output:

9
4
2
8
7
9
4
6
4
3

У вас же в коде вообще не нашел где используется переменная rands или функция randomInteger в рендеринге - скорее всего она у вас создаётся на старте приложения и живёт весь цикл процесса, покопайте ещё раз код внимательно

Comments

[funkydance]

Код подправил, переменная лежит в

<span className={b({ block, elem: "sound-name"})}>{rands}</span>

Блин, Вы гений. Функция и вправду создавалась на старте. Прям как в воду глядели. Спасибо, помогли очень.