TypeError : 정의되지 않은 배열의 속성 'length'을 읽을 수 없습니다.

Question

반응이 처음인데 어떻게 배열을 셔플 할 수 있는지 알아 내려고합니다. 나는 배열을 섞기 위해 다른 방법을 시도했지만 문제는 항상 길이와 함께있다. TypeError: Cannot read property 'length' of undefined. 왜 이런 일이 일어나고 있는지 또는 어떻게 대응해야하는지 잘 모르겠습니다. 나에게 이것은 React의 문제는 아니지만 다시는 모른다.

'하드'버튼을 클릭하면 배열 문제에서 두 개의 첫 번째 요소가 렌더링되고 버튼을 누를 때마다 배열이 바뀌어야합니다.

나를 도울 수있는 아이디어가 있습니까?

import React from 'react'; 
import ReactDOM from 'react-dom'; 

let era = [ 
    60, 70, 80, 90, 2000 
] 

let genre = [ 
    'Rock', 'Pop', 'Jazz', 'Country' 
] 

let challenge = [ 
    'LikeElvis', 'Parent\'s favourite songs', 'too high for me' 
] 

class Karaoke extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     'easy': '', 
     'easyChallenge': '', 
     'hard': '', 
     'hardChallenge': '', 
     'hardEra': '' 
    } 
    }; 

    selectEasy =() => { 
    let genreSelected = []; 
    let challengeSelected = []; 
    genreSelected.push(genre[Math.floor(Math.random() * genre.length)]); 
    this.setState({"easy": genreSelected}) 

    challengeSelected.push(challenge[Math.floor(Math.random() * challenge.length)]); 
    this.setState({"easyChallenge": challengeSelected}) 
    } 

    selectHard =() => { 
    let genreSelected = []; 
    let challengeSelected = []; 
    let eraSelected = []; 
    genreSelected.push(genre[Math.floor(Math.random() * genre.length)]); 
    eraSelected.push(era[Math.floor(Math.random() * era.length)]); 

    this.setState({ "hard": genreSelected}); 
    this.setState({ "hardEra": eraSelected}); 
    this.setState({ "hardChallenge": challengeSelected}); 

    challengeSelected.push(challenge.slice(0, 2)) 
    console.log(challengeSelected); 
    } 

    shuffle = (challenge) => { 
    let i = challenge.length, temporaryValue, randomIndex; 
    while (0 !== i) { 
     randomIndex = Math.floor(Math.random() * i); 
     i -= 1; 
     temporaryValue = challenge[i]; 
     challenge[i] = challenge[randomIndex]; 
     challenge[randomIndex] = temporaryValue; 
    } 
    return challenge 
    } 

    click =() => { 
    this.selectHard(); 
    this.shuffle(); 
    } 

    render =() => { 
    return(
     <div> 
     <button onClick={this.selectEasy}>Easy</button> 
     <button onClick={this.click}>Hard</button> 
     <h1>the genre is {this.state.easy} </h1> 
     <h1>the challenge is {this.state.easyChallenge} </h1> 
     <h1>Hard mode: {this.state.hard} + {this.state.hardEra + '\'s'}</h1> 
     <h1>Hard mode challenge: {this.state.hardChallenge} </h1> 
     </div> 
    ) 
    } 

} 


ReactDOM.render(<Karaoke />, document.getElementById('root')); 

Answer 1

인수를 기대하여 suffle 방법을 정의 :

이

는 코드입니다.

shuffle(challenge) { 
    // ... 
} 

click =() => { 
    // ... 
    this.shuffle(); 
} 

이 선언 된 인수가 undefined 원인이 될 것이고, suffle 방법은 글로벌 challenge 변수를 기본값으로하지 않습니다하지만 당신은 당신이 제공되지 않습니다 click 방법에서 호출 할 때 인수가 말했다.

이 문제를 해결하려면 방법 (고화질)에서 인수를 제거하거나 click 기능에 통과 중 하나가 필요합니다

shuffle() { 
    // ... 
} 
click =() => { 
    // ... 
    this.shuffle(); 
} 

/* OR */ 

shuffle(challenge) { 
    // ... 
} 
click =() => { 
    // ... 
    this.shuffle(challenge); 
}