Question

我正在做一个反应测验。我想在页面上同时显示一个问题及其选择。如： “ question”：“什么时候首次出现C编程语言？”， a。）1970 1971年约）1972 d。）1973年这是我到目前为止所做的：

import React from 'react'
import axios from 'axios'
class QuizApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {entered: false, correct: 0, wrong: 0}

    }

    state = {
        questions: [],
        choic: []
    };

    componentDidMount() {
        axios.get("http://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions").then((response) => {
            const questions = response.data;
            this.setState({questions});
            const choic = response.data;
            this.setState({choic});
            console.log(response);
        })
    }

    nickChange = (event) => {
        this.setState({username: event.target.value});

    };
    cleanPage = () => {
        this.setState({
            entered: true
        })

    };

    render() {

        if (!this.state.entered) {
            return (
                <div>
                    <form target="_self" id="firstPage">
                        <input  type="text" value={this.nick} onChange={this.nickChange}/>
                        <input type="submit" value="Start" name="cleanPage" onClick={this.cleanPage}/>
                    </form>
                </div>
            )
        }
        else {
            return (
                <div>
                    <ul>
                        {this.state.questions.map(que => <li>{que.question} </li>)}
                        {this.state.choic.map(cho => <li>{cho.choices.choice} </li>)}
                    </ul>

                </div>
            )
        }
    }
}

Answer 1

简化响应中的设置状态

const { questions, choices } = response.data;
this.setState({questions, choices});

在渲染中这样做（假设每个问题在该索引中都有相应的选择数组）：

{this.state.questions.map((que, index) => {
  <React.Fragment>
  <li>{que.question} </li>
    <ul>
      {choices[index].map(choice => <li>{choice}</li>)
    </ul>
  <React.Fragment
})}

根据需要设置元素样式

回应axios一一获得价值

1 个答案: