Блог

Хотя я понимаю использование состояния и рендеринга компонента, у меня возникают проблемы с этой конкретной ситуацией.

У меня есть набор вопросов, и я хочу выбрать случайное число от 0 до длины вопроса (в моем случае 8) без повторения чисел.

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

 const SomeComponent = props => {
  const [random, setRandom] = useState(null)

  function getRandomNumber(min, max) {
    let stepOne = max - min   1;
    let stepTwo = Math.random() * stepOne;
    let result = Math.floor(stepTwo)   min;

    return result
  }

  // this creates the array[0, 1, 2, 3, 4, 5, 6, 7]
  function createArrayOfNumbers(start, end) {
    let myArray = [];

    for (let i = start; i <= end; i  ) {
      myArray.push(i)
    }

    return myArray
  }

  let numbers = []

  function generator() {
    let numbersArray = createArrayOfNumbers(0, qAndA.length - 1)
    let finalNumbers = [];

    while (numbersArray.length > 0) {
      let randomIndex = getRandomNumber(0, qAndA.length - 1)
      let randomNumber = numbersArray[randomIndex];
      numbersArray.splice(randomIndex, 1);
      finalNumbers.push(randomNumber)
    }
    for (let nums of finalNumbers) {
      if (typeof nums === 'number') {
        numbers.push(nums)
        // for some reason i was getting undefined for a few so i weeded them out here and pushed into a new array
      }
    }
    const tester = numbers.splice(0, 1) ** this part works fine and
    console.log(tester) // each time my button is pressed it console logs a non repeating random number until ALL numbers(from 0 to 7 are chosen)
    setRandom(tester) // THIS IS THE LINE THAT SCREWS IT UP.re rendering seems to toss all the previous logic out...
  }


  return (<button onClick={generator}>click this to call function</button>)
}
  

Все до последней строки работает.

Это дает мне случайное число и кнопку, которая у меня есть, которая выполняет функцию (таким образом, давая случайное число)

НЕ повторяет случайные числа и выдает мне что-то вроде 0, затем 4, затем 1 и т.д. Каждый раз, когда я нажимаю на него, пока он не выдаст мне все возможные числа от 0 до 7.

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

Чтобы кое-что прояснить: это нужно сделать с помощью state, потому что я хочу установить случайный вопрос в это состояние случайного числа, а затем отобразить случайный вопрос без его повторения (подумайте о базовом тесте).

Я также не хочу, чтобы количество чисел было установлено или определено. Он должен работать динамически, учитывая, что со временем я буду добавлять больше вопросов в тест.

Посмотрите эту демонстрацию, которую я собрал вместе: https://codesandbox.io/s/competent-pine-0hxxi?file=/src/index.tsx

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

Ваш подход выглядит следующим образом:

 component => create data => render
  

Когда часто лучший способ сделать это выглядит так:

 receive data => component => render
  

Я думаю, что ваша проблема на самом деле заключается в том, «Как мне перетасовать массив элементов?». Тогда остальная часть вашей проблемы заключается в том, как вы решаете ее представить, и в реакции на взаимодействие с пользователем.

Прежде чем мы начнем думать о вашем компоненте, ваши вопросы где-то определены. Давайте назовем этот начальный пул вопросов data .

Затем ваш компонент примет эти данные либо в качестве реквизитов, либо может извлечь их из сети. Откуда бы они ни пришли, это не имеет большого значения.

С этими данными мы можем сказать: «ХОРОШО, наше начальное состояние для представления — это случайный порядок этих данных, он же «перетасованный»».

   // given our question pool `data`
  // we can simply set the initial state to a shuffled version
  const [questions, setQuestions] = React.useState<Question[]>(
    shuffle([...data])
  );
  

Хорошо, итак, у нас есть наши «случайные» (перемешанные) вопросы. Нам больше не нужно беспокоиться об этом вообще.

Если я пропустил тот факт, что вы хотите, чтобы он продолжал перетасовывать вопросы по мере получения ответа на каждый, с удовольствием продолжу свой ответ.

Теперь все, что нам нужно сделать, это отобразить их так, как нам нравится. Если мы показываем только один вопрос за раз, нам нужно отслеживать это.

   // keep track of which question we're displaying right now
  const [qIndex, setQIndex] = React.useState<number>(0);
  

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

   const handleAnswerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // create our updated question
    // now with an answer
    const theQuestion = questions[qIndex];
    const answeredQuestion = {
      ...theQuestion,
      answer: event.target.value
    };
    // copy our questions, and flip the old question for the new one
    const newQuestions = [...questions];
    newQuestions.splice(qIndex, 1, answeredQuestion);
    setQuestions(newQuestions);
  };
  

Остальное просто зависит от того, чтобы позволить пользователям перемещаться по вашему набору вопросов. Вот полный компонент:

 interface QuizProps {
  data: Question[];
}

export const Quiz = (props: QuizProps) => {
  // keep track of which question we're displaying right now
  const [qIndex, setQIndex] = React.useState<number>(0);

  // given our question pool `data`
  // we can simply set the initial state to a shuffled version
  const [questions, setQuestions] = React.useState<Question[]>(
    shuffle([...props.data])
  );

  // create our updated question
  // now with an answer
  const handleAnswerChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const theQuestion = questions[qIndex];
    const answeredQuestion = {
      ...theQuestion,
      answer: event.target.value
    };
    // copy our questions, and flip the old question for the new one
    // using slice (there are many ways to do this)
    const newQuestions = [...questions];
    newQuestions.splice(qIndex, 1, answeredQuestion);
    setQuestions(newQuestions);
  };

  const handleBackClick = () => setQIndex((i) => (i > 0 ? i - 1 : 0));
  const handleNextClick = () =>
    setQIndex((i) => (i < questions.length - 1 ? i   1 : i));

  return (
    <div>
      <h1>Quiz</h1>
      <div>
        <h2>{questions[qIndex].title}</h2>
        <h3>
          Question {qIndex   1} of {questions.length}
        </h3>
        <p>{questions[qIndex].description}</p>
        <ul>
          {questions[qIndex].options.map((answer, i) => (
            <li key={i}>
              <input
                id={answer.id}
                type="radio"
                name={questions[qIndex].id}
                checked={answer.id === questions[qIndex]?.answer}
                value={answer.id}
                onChange={handleAnswerChange}
              />
              <label htmlFor={answer.id}>{answer.value}</label>
            </li>
          ))}
        </ul>
      </div>
      <button onClick={handleBackClick}>Previous</button>
      <button onClick={handleNextClick} disabled={!questions[qIndex].answer}>
        Next
      </button>
    </div>
  );
};
  

Проблема в том, что ваши предыдущие случайные числа стираются при каждом цикле рендеринга. Вы можете «сохранить» их вне жизненного цикла реакции.

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

 const randomNumberGenerator = () => {
  let previous;

  return max => {
    let randomNumber;
    do {
      randomNumber = Math.floor(Math.random() * max);
    } while(randomNumber === previous);
    previous = randomNumber;
    return randomNumber;
  }
};
  

Затем в вашем компоненте react, когда вам нужно захватить случайное, непоследовательное значение:

 const getRandomNumber = randomNumberGenerator();

...

getRandomNumber(8)
getRandomNumber(10)
// etc..
  

Если вы знаете, что ваш max никогда не изменится, т. Е. Он всегда будет равен 8, тогда вы можете перейти max к функции внешней фабрики.

 const randomNumberGenerator = max => {
  let previous;

  return () => {
    let randomNumber;
    do {
      randomNumber = Math.floor(Math.random() * max);
    } while(randomNumber === previous);
    previous = randomNumber;
    return randomNumber;
  }
};
  

Тогда использование в коде немного упрощается.

 const getRandomNumber = randomNumberGenerator(8);

...

getRandomNumber()
  

Если вам все еще нужно обрабатывать диапазон случайных чисел, добавьте min значение в функцию и вычислите случайное значение в диапазоне.

 const randomNumberGenerator = () => {
  let previous;

  return (min, max) => {
    let randomNumber;
    do {
      randomNumber = Math.floor(Math.random() * (max - min)   min);
    } while (randomNumber === previous);
    previous = randomNumber;
    return randomNumber;
  };
};