如何使用 API 并在列表中显示结果

Question

我正在使用 ReactJS 和以下 API 端点创建一个琐事游戏：https://opentdb.com/api.php?amount=5&difficulty=medium&type=boolean

据我了解，我想在 ComponentDidMount() 生命周期方法中使用 API。从那里我尝试map() 覆盖此响应中的每个项目（总共应该有 5 个问题），并将它们保存到一个空的问题数组（这是我的组件状态的一部分）。最后，我想将这些问题显示在一个列表中。

我尝试了各种角度，包括async await、fetch() & .then()、using axios.get 等。这是我最近尝试的一个示例。我只是不确定如何使用 API，将这些问题保存到空问题数组中以进行状态，然后迭代，并在 DOM 中呈现问题。

请注意：我尝试过console.log(this.state.questions)，它将响应显示为代码 200，以及我的原始 API 端点 URL，但没有问题数据。我现在不明白问题在哪里！请帮忙！

class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      questions: [],
      score: 0,
      current: 0,
      loading: false
    }
  }

async componentDidMount() {
    try {
      this.setState({ loading: true })
      this.setState({ questions: await fetch('https://opentdb.com/api.php?amount=5&difficulty=medium&type=boolean'), loading: false })
      console.log("state", this.state.questions);
      console.log("props", this.props.questions);
    } catch (err) {
      console.log(err)
    }
  }
  }

  componentDidUpdate(){
    console.log("component just updated!");
  }

// another ComponentDidMount Attempt
// async componentDidMount(){
//     try {
//       this.setState({loading:true})
//       this.setState({questions: await fetch('https://opentdb.com/api.php?amount=5&difficulty=medium&type=boolean'), loading: false})
//         .then(questions => questions.json())
//         .then(questions => this.setState({questions, loading:false}))
//         console.log("state", this.state.questions);
//         console.log("props", this.props.questions);
//       } catch(err) {
//         console.log(err)
//       }
//
//   }

// attempt with axios ()
    // componentDidMount() {
    // axios
    //   .get("https://opentdb.com/api.php?amount=5&difficulty=medium&type=boolean")
    //   .then(response => {
    //     this.setState({ question: response.data.question });
    //     this.setState({ category: response.data.category });
    //     // this.setState({ type: response.data.type });
    //     // this.setState({ url: response.data.url });
    //     // this.setState({ score: response.data.score });
    //     console.log("axios GET worked");
    //   })
    //   .catch(err => {
    //     console.log(
    //       "Oops, something broke with GET in componentDidMount() - we've got a: ",
    //       err.message
    //     );
    //   });
    // }

// below is having an issue with .map() - maybe bc questions
// is object containing arrays(?)
  //
  // render() {
  //   return (
  //     <div>
  //       {this.state.loading
  //         ? "loading..."
  //         :  <div>
  //           {
  //             this.state.questions.map(question => {
  //             return(
  //             <div>
  //               <h3>Category: {question.category}</h3>
  //               <h4>Question: {question.question}</h4>
  //             </div>
  //             )
  //           })
  //         }
  //         </div>
  //       }
  //
  //       <HomeCard />
  //       <QuizCard />
  //       <ResCard />
  //     </div>
  //   );
  // }

export default App;

Answer 1

试试

async componentDidMount() {
  this.setState({
    loading: true
  });
  try {
    const response = await fetch('https://opentdb.com/api.php?amount=5&difficulty=medium&type=boolean');
    const data = await response.json();

    this.setState({
      questions: data.results,
      loading: false
    });
  } catch (err) {
    console.log(err)
  }
}

https://codesandbox.io/s/sad-bogdan-g5mub 上的演示

Answer 2

您的代码不起作用，因为对 setState 的调用也是异步的，因此您的 console.log(this.state.question); 是在状态更新之前执行的。为了解决这个问题，您可以将回调作为第二个参数传递给 setState，此回调将在状态更新后执行。

应该是这样的：

this.setState(
   { 
       questions: await fetch('https://opentdb.com/api.php amount=5&difficulty=medium&type=boolean'), 
       loading: false 
   },
   () => {
       console.log("questions", this.state.questions);
       console.log("loading", this.state.loading);
   }
)

您可以在此处找到更多信息：https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value。

希望对你有所帮助。