Почему мой компонент возвращает пустой объект в ReactJS? - PullRequest
Новая
       15

Почему мой компонент возвращает пустой объект в ReactJS?

0 голосов
/ 23 апреля 2020

У меня проблема с передачей данных из моего файла JSON в компонент теста, который я пытаюсь создать. До сих пор мне посчастливилось передать данные через простой JSON файл, который я сохранил в своей папке Sr c. Однако, когда я пытаюсь получить доступ к моему гораздо большему файлу, который находится в моей папке publi c, ничего не возвращается. Вместо того, чтобы возвращать объект, заполненный «текущим вопросом» и «текущими опциями», он возвращает пустой объект.

Было бы более полезно, если бы приложение показало какую-то ошибку, а потому что я понятия не имею, что вызывает это, сейчас я в растерянности.

Это основной файл, который используется для генерации вопросов, я использую этот компонент для передачи свойств из моего JSON файла. 

class Play extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            questions: this.props.questions,
            currentQuestion: {},
            nextQuestion: {},
            previousQuestion: {},
            answer: "",
            currentQuestionIndex: 0,
        }
    }
    componentDidMount(){
        const {questions, currentQuestion, nextQuestion, previousQuestion} = this.state;
        this.displayQuestions(questions,currentQuestion, nextQuestion,previousQuestion)
    }
    displayQuestions = (questions = this.state.questions, currentQuestion, nextQuestion, previousQuestion) => {
        let { currentQuestionIndex } = this.state;
        if(!IsEmpty(this.state.questions)){
            questions = this.state.questions;
            currentQuestion =  questions[currentQuestionIndex];
            nextQuestion = questions[currentQuestionIndex + 1];
            previousQuestion = questions[currentQuestionIndex - 1];
            const answer = currentQuestion.answer;
            this.setState({ 
                currentQuestion, 
                nextQuestion,
                previousQuestion,
                answer
            });
        }
    }

    render(){
        const {currentQuestion} = this.state;
        return(
            <React.Fragment>
                <Container>
                    <H5> {currentQuestion.question}</H5>
                    <OptionsContainer>
                        <ul> 
                            {!!currentQuestion.options && currentQuestion.options.map((option) =>
                                <p className = "option"> {option.option}</p>
                            )}
                        </ul>
                    </OptionsContainer>
                </Container>
            </React.Fragment>
        )
    }
}

Это то, как я использую компонент Play для динамической передачи данных из файла JSON, который у меня есть ниже. 

<Play questions = {this.props.questions}/>

Это отрывок из компонента, который динамически отображает URL и помещает каждый набор данных в отдельный компонент. 

    <Route path = {`${url}/:topicId`} render = {
        ({ match }) =>
        <TopicHeaderCard {...coreTopics.find(topic => topic.id === match.params.topicId)}/>}
    />

Фрагмент моего JSON файла, который используется для получения информации о тесте (очень базовый c на данный момент) 

 "questions": [
                {
                    "question": "How tall is your fridge?",
                    "options": [
                        {
                            "option": "6 feet"
                        },
                        {
                            "option": "12 feet"
                        },
                        {
                            "option": "3 feet"
                        },
                        {
                            "option": "1 foot"
                        }
                    ]
                }

Спасибо Заранее, вся помощь приветствуется!

1 Ответ

0 голосов
/ 24 апреля 2020

Я думаю, проблема в том, что реквизитам требуется время для загрузки, прежде чем они пройдены. Таким образом, вместо componentDidMount, вы должны попробовать componentDidupdate, чтобы, когда реквизиты обновляли данные, вы могли их использовать.

Я не уверен, что приведенный ниже код будет работать, просто попробуйте и адаптируйтесь к вашим предпочтениям. 

class Play extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            questions: [],
            currentQuestion: {},
            nextQuestion: {},
            previousQuestion: {},
            answer: "",
            currentQuestionIndex: 0,
            initComplete: false
        }
    }
    componentDidUpdate(){
        const {questions} = this.props;
        if(!IsEmpty(questions) && !initComplete){
            currentQuestion =  questions[currentQuestionIndex];
            nextQuestion = questions[currentQuestionIndex + 1];
            previousQuestion = questions[currentQuestionIndex - 1];
            const answer = currentQuestion.answer;
            this.setState({
                questions,
                currentQuestion, 
                nextQuestion,
                previousQuestion,
                answer,
                initComplete = true
            });
    }

    render(){
        const {currentQuestion} = this.state;
        return(
            <React.Fragment>
                <Container>
                    <H5> {currentQuestion.question}</H5>
                    <OptionsContainer>
                        <ul> 
                            {!!currentQuestion.options && currentQuestion.options.map((option) =>
                                <p className = "option"> {option.option}</p>
                            )}
                        </ul>
                    </OptionsContainer>
                </Container>
            </React.Fragment>
        )
    }
}
...