Question

renderQuestions部分没有问题。它打印第一个问题。问题出在renderChoices部分。我需要打印第一个问题4选择（a。）1970 b。）1971 c。）1972 d。）1973）。现在，它会打印0到3之间的数字。

import React from "react";
import axios from "axios";

class QuizApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { questions: [], choices: [] };
  }

  componentDidMount() {
    axios
      .get("http://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions")
      .then(response => {
        const allQuestions = [];
        const allChoices = [];

        response.data.forEach(({ question, choices }) => {
          allQuestions.push(question);
          allChoices.push(choices);
        });
        this.setState({ questions: allQuestions, choices: allChoices });
      });
  }

  renderQuestions = () => {
    let data = [];

    this.state.questions.map((que, i) => {
      data.push(<li key={i}>{que}</li>);
    });
    return data[0];
  };
  renderChoices = () => {
    let data = [];

    Object.keys(this.state.choices).map((ch, i) => {
      Object.keys(this.state.choices[ch]).map((cc, ii) => {
        data.push(<li key={ii}>{cc}</li>);
      });
    });
    return data;
  };
  render() {
    return (
      <div>
        {this.renderQuestions()}
        {this.renderChoices()}
      </div>
    );
  }
}

Answer 1

我不确定我为什么要提出所有问题，然后提出所有选择。我认为这只是一个测试？

鉴于数据的现有结构，更好的解决方案是将一个问题（及其解决方案）映射到组件。

赞：

function Question (props) {
  return (
    <div className="Question">
      <h4>{props.question}</h4>
      <ul>
        {props.choices.map((c, i) => (
          <li className={c.correct && "correct"} key={i}>
            {c.choice}
          </li>
        ))}
      </ul>
    </div>
  );
};

class QuizApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { questions: [] };
  }

  componentDidMount() {
    axios
      .get(
        "https://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions"
      )
      .then(response => {
        this.setState({ questions: response.data });
      });
  }

  render() {
    return <div>{this.state.questions.map(q => new Question(q))}</div>;
  }
}


ReactDOM.render(<QuizApp />, document.querySelector("#app"))

#app .Question li {
  display: inline-block;
  margin: 0.5em;
}

#app .Question .correct {
  background-color: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>

您现在可以轻松地修改它，一次只显示一个问题。

Answer 2

您需要通过数据数组映射，而不要返回它：

        import React from "react";
        import axios from "axios";

        class QuizApp extends React.Component {
          constructor(props) {
            super(props);
            this.state = { questions: [], choices: [] };
          }

          componentDidMount() {
            axios
              .get("http://private-anon-c06008d89c-quizmasters.apiary-mock.com/questions")
              .then(response => {
                const allQuestions = [];
                const allChoices = [];

                response.data.forEach(({ question, choices }) => {
                  allQuestions.push(question);
                  allChoices.push(choices);
                });
                this.setState({ questions: allQuestions, choices: allChoices });
              });
          }

          renderQuestions = () => {
            let data = [];

            this.state.questions.map((que, i) => {
              data.push(<li key={i}>{que}</li>);
            });
            return data[0];
          };
          renderChoices = () => {
            let data = [];

            Object.keys(this.state.choices).map((ch, i) => {
              Object.keys(this.state.choices[ch]).map((cc, ii) => {
                data.push(<li key={ii}>{cc}</li>);
              });
            });

    // change here
            return data.map((d,i)=><div key={i}>{d}</div>)
// or try:
// return data.map((d,i)=><d/>)
          };
          render() {
            return (
              <div>
                {this.renderQuestions()}
                {this.renderChoices()}
              </div>
            );
          }
        }

Answer 3

如下更改功能。由于您仅呈现样本中的第一个问题，因此这只会呈现第一组选择。但是，通过将问题和选择分为状态中的两个数组，您使此问题变得复杂。

renderChoices = () => {
    return this.state.choices[0].map((ch, i) => {
      return <li key={i}>{ch.choice}</li>
    });
  };

Answer 4

您可以尝试这样

 renderChoices = () => {
          let data = [];
          if (this.state.choices.length > 0) {
              var Answer = this.state.choices[0]
              Answer.map((ch, i) => {
                  data.push(ch.choice)
              });
          }
          return data;
      };

如何在React Axios中获取内部数组的值

4 个答案: