reactjs, get array in state in for loop? - arrays

The Line console.log before if can log a number but the if statement go error with
this.state.question[i] is undefined.
after 4 hours I can't understand why?
enter image description here

You are getting an error because you are iterating your question array one too many times. If you have 5 items in the array, you want indexes 0, 1, 2, 3 and 4. Your loop tries to read index 5 as well because you have: i <= this.state.question.length. Try changing this to i < this.state.question.length instead.
Also, you are setting your state twice which is unnecessary and may trigger a re-render more than needed. Instead work with a temporary variable:
handlePlay = (e) => {
setInterval(function(){
const time = Math.round(e.target.getCurrentTime());
let obj = {currentTime: time}; //temporary variable to build your next state
for(let i = 0;i<=this.state.question.length;i++){
if(time==this.state.question[i].time){
obj.currentQuestion = i; //add stuff to it
}
}
this.setState(obj); //set your final state here
}.bind(this),1000)
}

Related

update objects in array with useState (reactJS)

Go to the end of this question for the solution that worked for me!
i'm currently making my own chess game and i want to check if a position already occurred 3 times. I keep the current position in a 2d array. This is what i tried:
Initialize the useState:
const [positionList, setPositionList] = useState([])
structure of the state should look like this
[
{
position: //some 2d array,
counter: 1
},
{
position: //another 2d array,
counter: 1
}
]
Compare the positions from the array with the current position
(if the position already existed, set counter one up)
let found = false
for (let i = 0; i < positionList.length; i++) {
if (JSON.stringify(positionList[i].position) === JSON.stringify(position)) {
positionList[i].counter = positionList[i].counter + 1
found = true;
break;
}
}
if the position never occurred before, add it to the array
if (found === false) {
setPositionList([...positionList, {position: position, counter: 1}]);
}
The 2nd and 3rd code block gets executed after every move (after players turn).
But for some reason, if "found" is false, it wont add the new position to the array but replace the last object in the array. And furthermore, when i log the changes made to "positionList" with a useEffect, it gets reset after every move to the default value (basically empty array), even though im not changing the state in any other part of my code.
I log the positionList like this:
useEffect(() => {
console.log(positionList)
}, [positionList])
I just cant figure out my error, hopefully someone can help.
Thanks!
EDIT:
I decided to try another way of counting the positions. I now only have one array which contains every position that occured in the correct order. Then i just loop through the array and count the amount of times the current position is in the array. My code looks like this:
Note: I think its important to note that you need to create a copy of the array you want to push. Otherwise all entrys in the array will be completly the same and you won't get the expected output (also see here)
function checkForThreefoldRepetition () {
let counter = 0;
for (let i = 0; i < positionList.length; i++) {
if (JSON.stringify(positionList[i]) === JSON.stringify(position)) {
counter++;
}
}
if (counter === 2) {
const updateGameOver = {
gameOver: true,
reason: "threefold repetition",
winner: "draw"
}
setGameOver(updateGameOver)
}
}
useEffect(() => {
let positionCopy = [];
for (let i = 0; i < position.length; i++) {
positionCopy[i] = position[i].slice();
}
setPositionList([...positionList, positionCopy]);
checkForThreefoldRepetition()
}, [playerTurn])
I think your problem is you are modifying current state directly like this one which is not a proper way of updating state :
positionList[i].counter = positionList[i].counter + 1
So this extra render cause problems,I think.

Problem with this react flow, maximum update depth exceeded

I have the following function
compareProducts = (empresa) => {
console.log(empresa.listaProductos)
let headerSetIn = false;
for (let i in empresa.listaProductos) {
//case1 : lookup for some data in an array, if found, setState and exit the whole function
if (pFichaInternacional && pFichaInternacional.length > 0) {
console.log("caso1")
let product: any = pFichaInternacional;
let nombreEmpresaApi = empresa.listaProductos[i].nombre
let productoFiltrado = product.filter(i => i.referencia == nombreEmpresaApi)
productoFiltrado = productoFiltrado[0]
if (productoFiltrado) {
headerSetIn = true
this.setState({
headerCardText: productoFiltrado.descripcion.toString(),
headerButtonText: productoFiltrado.label.toString(),
})
break;
}
}
}
//case 2: case1 didnt found the data, so we setup some predefined data.
if (!headerSetIn && pFichaInternacional.length > 0) {
let product: any = pFichaInternacional;
this.setState({
headerCardText: product[0].descripcion.toString(),
headerButtonText: product[0].label.toString()
})
}
}
Im receiving a
Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
I have also tried using a setstate , instead of a local variable to set the headerSetIn parameter. But if I do it, I think js doesnt have time to evaluate the change, and both are executed, instead of only 1
Ive tried to use () , => after the first state, but it doesnt make sense in my flow
As far as I can understand is that you are calling setState in a for loop, which is not a good thing. Every time a certain condition is met setState is called, so you are constantly setting the state and rerendering smashing your performance and causing this.
I would suggest using a variable and get the needed data in the for loop then after you have excited the for loop simply use setState to set the state after all the data has been looped trough.

Swift, Generating Array Variables of a Numbered List

I'm making a simple game in swift and xcode and I ran into this problem that I can't figure out. Because I have so many levels, the code locks up indexing and slows down the whole program. I get a color wheel spinning for a few minutes but it never crashes. Just takes several minutes everytime I type in a few characters. Strange, but xcode has always had it's bugs right?
Each Button ("button1, button2..." below) gets a single number from "level1:Array". It's like a code that fills in the button's value for the game. There are only 4 buttons, but the numbers should be able to change as they each have their own variables.
I want to generate this for every level. I should be able to generate something like "button1 = level#[0]" where # is replaced by "userLevel". Changing to a string and doing something like "button1 = ("level(userLevel)") as! Array... doesn't seem to work. Look below and use my terminology when giving examples if you can. Thanks!
Here's the example:
let level1:Array = [9,7,4,1] // current puzzle, to go directly into button vars below (button1,button2,ect)
var userLevel = 1 // current user's level
if userLevel == 1 {
print("making Level 1, setting buttons to value from array")
button1 = level1[0]
button2 = level1[1]
button3 = level1[2]
button4 = level1[3]
}
Now, since level# is repeated so often (for each level as the number progresses) I would rather just make it something like this:
//this doesn't work in swift, but what else can I do?
if userLevel > 0 {
button1 = level\(userLevel)[0]
button2 = level\(userLevel)[1]
button3 = level\(userLevel)[2]
button4 = level\(userLevel)[3]
}
Is there an easy way to do this? Thanks!
-GG
Try using a for-in loop. Create an array of the buttons, and then
var index = 0
for button in buttons {
button = level1[index]
index++
}
EDIT since you want both the user level and the level number to increase, I suggest you define the levels like this. (Make sure that the number of buttons is equal to the number of userLevels, otherwise you will have problems)
var array = [1,2,3]
let levels = [1:[1,3,8],2:[3,6,4],3:[4,2,5]]
var index = 0
if array.count == levels.count {
for number in array {
array[index] = levels[index+1]![index]//The second index can be 0 if you want
index++
}
}
//array = [1,6,5]
// You could create a second index to match the number of levels within the main user level.
In this case, assume array to be your array of buttons
EDIT 2 :)
I've made a function that will allow you to assign all the levels to your array for a specific userLevel, since I see that is what you want
let levels = [1:[1,3,8],2:[3,6,4],3:[4,2,5]]
func assignValuesToArray(levelNo:Int) -> [Int] {
var array: [Int] = []
if (levelNo > 0) && (levelNo <= levels.count) {
for (level,levelArray) in levels {
if level == levelNo {
for value in levelArray {
array.append(value)
}
}
}
return array
} else {
print("This Level number does not exist")
return []
}
}
var finalArray = assignValuesToArray(2)
print(finalArray) // Returns [3,6,4]
As you can see from this example, you will return your array of buttons from the function, and you can assign the returned array values to whatever you like.

Clearing my array leaves blank array positions

So I'm facing a problem with an AS3 class that's not operating the way I need it to. It's a simple problem, but a complex set of methods that cause it.
Firstly, the 'quiz' I'm building has 6 questions loaded as external SWFs inside of a Shell, run by a class. First we declared a var "a_quiz" to hold 6 values pushed from the external SWFs. These 6 values are reduced to a string and then checked against another array that contains the correct answers. The following loadQuiz function is designed to launch one of three random quizes and clear the a_quiz array so it can take new answers:
public function loadQuiz():void {
a_quiz.length=0;
trace("loadQuiz");
n_quizCorrect = n_quizScore = 0;
n_currentQuiz = Math.floor(Math.random() * (n_totalTopics - n_quizStart + 1) + n_quizStart);
loadTopic(n_currentQuiz);
}
Now I've tested the Shell and confirmed that the trace "loadQuiz" fires every time. And the first time you load the quiz, everything behaves as it should. The 6 questions trace correct or incorrect responses and push 6 binary values into the a_quiz array. The output looks like this:
loadQuiz
incorrect
correct
incorrect
incorrect
incorrect
incorrect
0,1,0,0,0,0
you failed
Then I jump back to the main menu and launch again. This deploys the loadQuiz function all over again. The first line of the function:
a_quiz.length=0;
should be emptying the a_quiz array to accept new answers to mark against. But when I complete the quiz I get this:
loadQuiz
correct
correct
correct
correct
correct
correct
,,,,,,1,1,1,1,1,1
you failed
For some reason beyond my understanding, the push values are stacking on top of empty positions, so when the strings compare...they won't match. What is going on here?
The push function:
function handleClick(evt:MouseEvent):void{
var tempCORRECT = a_answerSheet.toString();
var tempSELECTION = a_selected.toString();
//
if(tempSELECTION == tempCORRECT){
trace('correct');
parentObj1.a_quiz[ parentObj1.n_currentQuestion - 1 ] = 1;
}else{
trace('incorrect');
parentObj1.a_quiz[ parentObj1.n_currentQuestion - 1 ] = 0;
}
parentObj1.n_currentQuestion ++;
// GOTO NEXT SLIDE
parentObj1.LOADNEXT('up');
}
The problem originated in the loading of the Quiz itself.
as you can see on the handleClick function:
parentObj.n_currentQuestion++
was increasing an integer variable on the parentObj's timeline called n_currentQuestion. The problem then, originated in how the quiz was logging n_currentQuestion when the quiz loads with this function:
public function loadQuiz():void {
a_quiz= [];
trace("loadQuiz");
n_quizCorrect = n_quizScore = 0;
n_currentQuiz = Math.floor(Math.random() * (n_totalTopics - n_quizStart + 1) + n_quizStart);
loadTopic(n_currentQuiz);
}
So to correct the error, I needed to add a line to the loadQuiz, so that it would always load with n_currentQuestion set to 1.
public function loadQuiz():void {
a_quiz= [];
n_currentQuestion = 1;
trace("loadQuiz");
n_quizCorrect = n_quizScore = 0;
n_currentQuiz = Math.floor(Math.random() * (n_totalTopics - n_quizStart + 1) + n_quizStart);
loadTopic(n_currentQuiz);
}

pushing or adding arrays as values into a multi-dimensional array in actionscript 3.0

I am running into some trouble adding an array into another array to create a multi-dimensional array.
The code appears as below:
var slideDataArray:Array = new Array();
var slideShowDataArray:Array = new Array();
slideDataArray[0] = xmlData.SlideShowParameters.SlideShowImagesDirectory;
slideDataArray[1] = xmlData.SlideShowParameters.SlideShowTimeInterval.valueOf();
slideDataArray[2] = xmlData.SlideShowParameters.SlideShowWidth.valueOf();
slideDataArray[3] = xmlData.SlideShowParameters.SlideShowHeight.valueOf();
slideDataArray[4] = slides.length();
slideShowDataArray[0] = slideDataArray;
for (i = 0; i < slides.length(); i++) {
// Read data from Slides tag in the XML file into slideDataArray
slideDataArray[0] = slides[i].SlideImage.toString();
slideDataArray[1] = slides[i].SlideText.toString();
slideDataArray[2] = slides[i].SlideLink.toString();
// Input the data from slideDataArray into the array for the slideshow (slideShowDataArray)
slideShowDataArray[i + 1] = slideDataArray;
}
// end of FOR loop
I am looking for a means of placing the slideDataArray into a 'slot' or value of slideShowDataArray so that I can in the end pass the slideShowDataArray as a parameter to another function.
As of now, the last slideDataArray appears 11 times (the loop runs 11 times) in slideShowDataArray and the way the code is written the slideDataArray is unique every iteration of the loop.
Any help is appreciated.
Thanks in advance...
Remember you are not adding an array, but a reference to slideDataArray to your multidimensional array. Each reference points to the same array - which just contains different values on every iteration of the loop. In other words: Every time you add that reference, you "link" to the same address in memory.
To get around this, move the inner part of the loop to a separate function and create a new local array on every call:
function createDataArray ( slide:Object ) : Array {
var slideDataArray:Array = [];
slideDataArray[0] = slide.SlideImage.toString();
slideDataArray[1] = slide.SlideText.toString();
slideDataArray[2] = slide.SlideLink.toString();
return slideDataArray;
}
Then call it from your loop:
for (i = 0; i < slides.length(); i++) {
slideShowDataArray.push( createDataArray (slides[i]) );
}
You should end up with 11 unique arrays instead of one array that is overwritten 11 times.

Resources