Question

我已经编写了必须从按钮上的API获取数据的代码，但是为了更轻松，更整洁的页面，我希望具有切换按钮，但是我不知道如何在函数和渲染方法中实现它。 / p>

我尝试了状态和功能，但是不知道如何在render中编写它。

import React from "react";
import "./FetchBeerStyle.css";

export default class FetchBeer extends React.Component {

        constructor(props) {
          super(props);
          this.state = {
            beers: [],
            on:false,
          }
        }

        handleClick = () => {
          fetch('https://api.punkapi.com/v2/beers')
          .then(res => {
            if (!res.ok) {
              throw new Error('There has been an error');
            }
            return res.json();
          })
          .then(data => {this.setState({ beers: data})
                        console.log(this.state.beers);
        })
          .catch(e => console.log(e))
        }


        render(){
        return (
          <div>
            <button onClick={this.handleClick}>Get All Beers/Return</button>
           {this.state.beers.map((beer) => {
             return <div key={beer.id}>
               <h1 className="h1" >NAME : {beer.name}</h1>
               <img src= {beer.image_url}/>
               <h2>TAGLINE : {beer.tagline}</h2>
               <p>FIRST BREWED : {beer.first_brewed}</p>
               <p> DESCRIPTION : <br></br>{beer.description}</p>
               <p> FOOD PAIRING : <br></br>{beer.food_pairing}</p>
               <p> ALCOHOL BY VOLUME(%) : {beer.abv}</p>
               <p> pH : {beer.ph}</p>


               </div>

           })}
          </div>
        );
        }
      }

Answer 1

您可以检查button是true还是false，然后呈现数据。此外，您还需要调用其他函数来更改单击时按钮的状态，然后调用函数“ handleClick”来获取数据。

`{
this.state.on ?
this.state.beers.map((beer) => {
     return <div key={beer.id}>
       <h1 className="h1" >NAME : {beer.name}</h1>
       <img src= {beer.image_url}/>
       <h2>TAGLINE : {beer.tagline}</h2>
       <p>FIRST BREWED : {beer.first_brewed}</p>
       <p> DESCRIPTION : <br></br>{beer.description}</p>
       <p> FOOD PAIRING : <br></br>{beer.food_pairing}</p>
       <p> ALCOHOL BY VOLUME(%) : {beer.abv}</p>
       <p> pH : {beer.ph}</p>


       </div>

   })

：空 }`

如何切换从API提取数据的开/关按钮？

1 个答案: