Указатель 'this' не определен, вероятно, потому что он отсутствует, но как? - PullRequest
Новая
       4

Указатель 'this' не определен, вероятно, потому что он отсутствует, но как?

0 голосов
/ 21 января 2020

Я получаю это сообщение:

TypeError: this.getRandomQuestion не является функцией. (В 'this.getRandomQuestion ()' 'this.getRandomQuestion' не определено).

Я почти уверен, что это потому, что указатель "this" не проходит весь путь до моего обратный вызов (getNext () см. комментарий). Это работало ранее, но мне нужно было добавить еще один слой косвенности, чтобы смешать ответы на мою викторину. Вот когда это начало сбой.

Кажется, что также настроена привязка. 

'use strict';
import Colors from './Colors';
import type {Node} from 'react';
import {Text, Button,View,StyleSheet, ImageBackground} from 'react-native';
import React, {Component} from 'react';
import * as data from './data/questions.json';

export default class Question extends React.Component {
    constructor(props) {
        super(props);
        this.state = {thisQuestion: this.getRandomQuestion()};

        this.getRandomQuestion = this.getRandomQuestion.bind(this);
        this.getNext = this.getNext.bind(this);     
    }

    noOp() {
        return;
    }

    getRandomQuestion() {
        var questionCount = data.Questions.length;
        var randomIndex = Math.floor((Math.random() * questionCount));
        var newQ = data.Questions[randomIndex];

        var offset = Math.floor((Math.random() * 4));

        if (offset == 0) {
            newQ.a1 = newQ.Answer1;
            newQ.a2 = newQ.Answer2;
            newQ.a3 = newQ.Answer3;
            newQ.a4 = newQ.Answer4;
            newQ.click1 = this.getNext;
            newQ.click2 = this.noOp;
            newQ.click3 = this.noOp;
            newQ.click4 = this.noOp;            
        }

        if (offset == 1) {
            newQ.a4 = newQ.Answer1;
            newQ.a1 = newQ.Answer2;
            newQ.a2 = newQ.Answer3;
            newQ.a3 = newQ.Answer4;

            newQ.click4 = this.getNext;
            newQ.click1 = this.noOp;
            newQ.click2 = this.noOp;
            newQ.click3 = this.noOp;            
        }

        if (offset == 2) {
            newQ.a3 = newQ.Answer1;
            newQ.a4 = newQ.Answer2;
            newQ.a1 = newQ.Answer3;
            newQ.a2 = newQ.Answer4;
            newQ.click3 = this.getNext;
            newQ.click4 = this.noOp;
            newQ.click1 = this.noOp;
            newQ.click2 = this.noOp;            
        }

        if (offset == 3) {
            newQ.a2 = newQ.Answer1;
            newQ.a3 = newQ.Answer2;
            newQ.a4 = newQ.Answer3;
            newQ.a1 = newQ.Answer4;
            newQ.click2 = this.getNext;
            newQ.click3 = this.noOp;
            newQ.click4 = this.noOp;
            newQ.click1 = this.noOp;            
        }

        return newQ;
    }

    getNext() {
        alert('in getNext ' + this.getRandomQuestion);  // <--- this shows "in getNext undefined"
        var newQ = this.getRandomQuestion();    // this is where it fails ... not defined. Huh?
        this.setState( {thisQuestion:newQ} );       
    }

    render() {
        var thisQuestion = this.state.thisQuestion;

        return <View style={styles.body}>
            <View style={styles.sectionContainer}>
                <Text style={styles.sectionTitle}>{thisQuestion.Text}</Text>
                <View style={styles.sectionContainer}>
                    <Button title={thisQuestion.a1} color="gray" onPress={() => thisQuestion.click1() }/>   
                </View>
                <View style={styles.sectionContainer}>
                    <Button title={thisQuestion.a2} color="gray" onPress={() => thisQuestion.click2() }/>  
                </View>
                <View style={styles.sectionContainer}>
                    <Button title={thisQuestion.a3} color="gray" onPress={() => thisQuestion.click3() }/>  
                </View>
                <View style={styles.sectionContainer}>
                    <Button title={thisQuestion.a4} color="gray" onPress={() => thisQuestion.click4() }/>  
                </View>
            </View>
        </View>;
    }
}

Как мне получить указатель "this" на мой обратный вызов?

РЕДАКТИРОВАТЬ : Добавлены строки, содержащие информацию о данных (они поступают из файла json).

1 Ответ

1 голос
/ 23 января 2020

Вместо установки функции для привязанной версии той же функции в constructor, я думаю, вы могли бы просто добавить слушателя с привязкой, непосредственно к элементу, например: 

newQ.click1 = this.getNext.bind(this)

И сделайте то же самое для других слушателей, которые у вас могут быть.

Я, по крайней мере, предпочитаю делать это, более того, если по какой-то причине вам нужно добавить другую область привязки для слушателя (не использовать this, например), вы можете, настроив привязку только для указанного c элемента / слушателя.

...