太多的重新渲染。 React 限制了渲染的數量以防止無限循環。 反應鈎和 ReactJS

Question

試圖獲取當前的字母數組並且還想刪除重復的字母，並且每次當不匹配的字母數組達到 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 }) => { 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(() => { const runEffect = async () => { const result = await axios('src/api/api.js'); setData(result.data); } runEffect(); }, []); const randomWord = () => { setArrayCount(arrayCount + 1); if((arrayCount >= data.length - 1)) { setArrayCount(0); shuffle(data); } replaceLetter(data[arrayCount].word); cleanWord(); } const shuffle = (a) => { // create copy or new array let newArr = [...a]; for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [newArr[i], newArr[j]] = [newArr[j], newArr[i]]; } setData(newArr); } const replaceLetter = (string) => { let getString = string; setWord(getString); } useEffect(() => { const checkLetter = (event) => { let letter = String.fromCharCode(event.keyCode).toLowerCase(); if(event.keyCode >= 65 && event.keyCode <= 90) { setGuessed((prev => [...prev, letter])); } if(event.keyCode === 13) { checkScore(); } } document.addEventListener('keydown', checkLetter); return () => { document.removeEventListener('keydown', checkLetter); } }, [guessed, count]); // check the part of the code here..... let newArray = guessed.filter(el=> 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 = []) => { if(string.length > 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 = () => { if(isGuessed) { setGuessed([]); } // setWrongLetter(0); } const checkScore = () => { let newScore = Math.round(((1000 / (count / curr.length)) * 20) / 100); setCount(0); } return ( <div> <p></p> <p>{word}</p> <p>{revealMatchedWord(word, guessed)}</p> <button onClick={randomWord}></button> </div> ) } const mapDispatchToProps = dispatch => ({ newArray: (removeDuplicates) => dispatch(newArray(removeDuplicates)) }); const mapStateToProps = state => { return { filteredArray: state.game.filterArray } }; export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

您可以嘗試在效果中設置非重復項：

  useEffect(() => {
    setRemoveDuplicate(
      Array.from(
        new Set(
          guessed.filter(el => word.indexOf(el) === -1)
        )
      )
    );
  }, [guessed, word]);