时间戳

首页 > 解决方案 > 无法读取以 React 状态存储的 json 对象

reactjs - 无法读取以 React 状态存储的 json 对象

问题描述

import React from 'react';
import axios from 'axios';

class Quiz extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showInstruction: true,
            questionIndex: 0,
            isLoading: true,
            questions: ''
        };
    }

    proceedHandler = () => {
        this.setState({
            showInstruction: false
        })
    }

    handleQuestion = (event) => {
        event.preventDefault();
        console.log('show next question');
    }

    componentDidMount() {
        console.log("After mount! Let's load data from API...");
        axios({
            method: "GET",
            url: "/apis/questions"
        }).then(response => {
            console.log(response.data);
            this.setState({ questions: response.data });
            this.setState({ isLoading: false });
        });
    }

    render() {
        if (this.state.showInstruction) {
            return (
                <div>
                    <h1>Welcome to Quiz</h1>
                    <p>Quiz instructions goes here</p>
                    <button type="button" onClick={this.proceedHandler}>Proceed</button>
                </div>
            )
        }
        const { isLoading, questions } = this.state;
        console.log(this.state['questions'][0]);
        console.log(questions[0]);
        if (isLoading) {
            return <div className="App">Loading...</div>;
        }
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    
                    <div onChange={this.onChangeValue}>
                        {/* {questions[0]} */}
                    </div>
                    <button onClick={this.handleQuestion}>Next</button>
                </form>
            </div>
        )
    }
}

export default Quiz;

我的示例 API 内容如下所示。现在对存储在 Public 文件夹中的本地文件进行 api 调用。路径是public/apis/questions。

[
    {
        id: 0,
        question: `What is the capital of Nigeria?`,
        options: [`New Delhi`, `Abuja`, `Aba`, `Onisha`],
        answer: `Abuja`
    },
    {
        id: 1,
        question: `What is the capital of India?`,
        options: [`Punjab`, `Awka`, `Owerri`, `Enugu`],
        answer: `New Delhi`
    }
]

我正在构建一个测验应用程序，上面是我的代码。我尝试从 api 获取问题并根据状态一一呈现。我正在使用 axios 来获取 componentDidMount 中的数据，我可以看到this.state.questions问题数组已更新。但是当我这样做时questions[0]，this.state.questions[0]它总是返回[。任何帮助将不胜感激，因为我对反应开发相当陌生。

标签： reactjs

解决方案

问题来自我的 API 数据。我错过了用双引号括起来的键。从 api 调用更新数据解决了我的问题。因此示例 api 数据将如下所示。

[
    {
        "id": 0,
        "question": "What is the capital of Nigeria?",
        "options": [
            "New Delhi",
            "Abuja",
            "Aba",
            "Onisha"
        ],
        "answer": "Abuja"
    },
    {
        "id": 1,
        "question": "What is the capital of India?",
        "options": [
            "Punjab",
            "Awka",
            "Owerri",
            "Enugu"
        ],
        "answer": "New Delhi"
    }
]

推荐阅读