Question

我正在使用javascript trivia API制作应用程序。我在显示错误答案的每个值时遇到问题。

到目前为止，我已经将它们以及问题和正确答案保存在了我的状态

componentDidMount() {
  axios.get('https://opentdb.com/api.php?amount=50').then(response => {
    for (var key in response.data.results) {
      console.log(response.data.results[key].question)
      this.setState(prevState => ({
        questions: [...prevState.questions, response.data.results[key].question],
        answers: [...prevState.answers, response.data.results[key].correct_answer],
        wrongAnswers: [...prevState.wrongAnswers, response.data.results[key].incorrect_answers]

      }));
    }
  });
}

这很好用，但是我的问题是错误的答案是数组本身，所以每当我显示状态时

<p>{this.state.wrongAnswers[this.state.random]}</p> // prints array of strings

我得到另一个数组，我可以使用点运算符访问每个元素，因为由于问题是随机选择的，所以我不知道答案。

我想使用单选按钮动态显示值。有没有办法访问嵌套数组的每个元素并动态显示它们？

Answer 1

您可以遍历该数组并显示错误的答案

{Array.isArray(this.state.wrongAnswers) && this.state.wrongAnswers.map((wrongAnswer, index) => {
  <p key={'Key-'+index}>wrongAnswer}</p>
}}

在javascript

1 个答案: