无法从 React state 访问对象数组中的值

Question

After Storing the array of objects in the this.state, I tried to access the value in the object like Array[random].someValue but it shows error Array[random] is undefined . But it works for Array[random] returns an object. Why can't i access the value inside that object...?

class Quiz extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: undefined,
            q_no: 0,
            rand_q: {},
            opts: []
        }
        this.newQuestion = this.newQuestion.bind(this);
    }

    componentDidMount() {
        if(this.state.data === undefined) {
            fetch("http://restcountries.eu/rest/v2/all")
            .then(data => data.json())
            .then(data => this.setState({data: [data.map((val) => ({name: val.name, flag: val.flag}))]}))
            .then(() => console.log(this.state.data));
        }
    }

    newQuestion() {
        const state = this.state;
        const rand = Math.floor(Math.random() * 200);
        this.setState({rand_q: {name: state.data[rand].name, flag: state.data[rand].flag}, opts: [state[rand-1].name, state[rand+1].name, state[rand+2].name]});
    }

TypeError: state.data[rand] is undefined
newQuestion
src/Quiz.js:30

  27 | newQuestion() {
  28 |     const state = this.state;
  29 |     const rand = Math.floor(Math.random() * 200);
> 30 |     this.setState({rand_q: {name: state.data[rand].name, flag: state.data[rand].flag}, opts: [state[rand-1].name, state[rand+1].name, state[rand+2].name]});
     | ^  31 | }
  32 | 
  33 | render() {

Please help...

Answer 1

Your constructor is called before componentDidMount so there is no state.data available (since you set it to undefined ).

You either have to move the newQuestion call to the render function or to componentDidUpdate