javascript — слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл. React Hook и ReactJS

Слишком много перерисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл. React Hook и ReactJS

Пытаясь получить текущий массив букв, а также хотите удалить дубликаты, и каждый раз, когда массив непревзойденных букв достигает длины 5, игра заканчивается … К вашему сведению, это должна быть зависшая игра в ReactJS , Получение массива и попытка удалить дубликаты в массиве — не большая проблема для меня, но как мне сохранить это в useState без этой ошибки.

Прокрутите вниз коды и проверьте: setRemoveDuplicate (noDuplicates);

 import React, { useState, useEffect, useRef } from 'react'; import axios from 'axios'; import 'babel-polyfill'; import { connect } from 'react-redux'; import { store } from '../index.js'; import { newArray } from '../actions/index'; // import { isRegExp } from 'util'; const App = ({ filteredArray }) ={amp}gt; { const [ guessed, setGuessed ] = useState([]); const [ word, setWord ] = useState(""); const [ data, setData ] = useState([]); const [ count, setCount ] = useState(0); const [ arrayCount, setArrayCount ] = useState(0); const [ removeDuplicate, setRemoveDuplicate ] = useState([]); useEffect(() ={amp}gt; { const runEffect = async () ={amp}gt; { const result = await axios('src/api/api.js'); setData(result.data); } runEffect(); }, []); const randomWord = () ={amp}gt; { setArrayCount(arrayCount   1); if((arrayCount {amp}gt;= data.length - 1)) { setArrayCount(0); shuffle(data); } replaceLetter(data[arrayCount].word); cleanWord(); } const shuffle = (a) ={amp}gt; { // create copy or new array let newArr = [...a]; for (let i = a.length - 1; i {amp}gt; 0; i--) { const j = Math.floor(Math.random() * (i   1)); [newArr[i], newArr[j]] = [newArr[j], newArr[i]]; } setData(newArr); } const replaceLetter = (string) ={amp}gt; { let getString = string; setWord(getString); } useEffect(() ={amp}gt; { const checkLetter = (event) ={amp}gt; { let letter = String.fromCharCode(event.keyCode).toLowerCase(); if(event.keyCode {amp}gt;= 65 {amp}amp;{amp}amp; event.keyCode {amp}lt;= 90) { setGuessed((prev ={amp}gt; [...prev, letter])); } if(event.keyCode === 13) { checkScore(); } } document.addEventListener('keydown', checkLetter); return () ={amp}gt; { document.removeEventListener('keydown', checkLetter); } }, [guessed, count]); // check the part of the code here..... let newArray = guessed.filter(el={amp}gt; word.indexOf(el) === -1); // filtering out the unmatched letters is ok let noDuplicates = Array.from(new Set(newArray)); // removing duplicated letters is also not an issue. setRemoveDuplicate(noDuplicates); // there error starts when I want to add useState here const revealMatchedWord = (string, guessed = []) ={amp}gt; { if(string.length {amp}gt; 0) { const regExpr = new RegExp(`[^${guessed.join("")}\s]`, 'ig'); return string.replace(regExpr, '_'); } } const curr = revealMatchedWord(word, guessed); const isGuessed = curr === word; // check if word is guessed. const cleanWord = () ={amp}gt; { if(isGuessed) { setGuessed([]); } // setWrongLetter(0); } const checkScore = () ={amp}gt; { let newScore = Math.round(((1000 / (count / curr.length)) * 20) / 100); setCount(0); } return ( {amp}lt;div{amp}gt; {amp}lt;p{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{word}{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{revealMatchedWord(word, guessed)}{amp}lt;/p{amp}gt; {amp}lt;button onClick={randomWord}{amp}gt;{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; ) } const mapDispatchToProps = dispatch ={amp}gt; ({ newArray: (removeDuplicates) ={amp}gt; dispatch(newArray(removeDuplicates)) }); const mapStateToProps = state ={amp}gt; { return { filteredArray: state.game.filterArray } }; export default connect(mapStateToProps, mapDispatchToProps)(App); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector