Показать/скрыть данные о взаимодействии с fetch API

Question

Я пытаюсь получить данные из API и показать/скрыть его в ответ. Я получаю данные в порядке, но кнопка скрыть не работает. Данные отображаются всегда. Я относительно новый, чтобы реагировать и действительно хочу его изучить. Вот мой код: (И было бы здорово, если бы кто-нибудь предположить, где я могу узнать больше о реакции на веб-сайте)

import React from 'react'; 
import {render} from 'react-dom'; 

class Series extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      showSeries: false 
     }; 
    } 

    render() { 
     const serieses = this._GetList(); 
     let seriesNodes; 
     let buttonText = 'Show Series'; 
     if (this.state.showMangas) { 
      seriesNodes = <div>{serieses}</div>; 
      buttonText = 'Hide Series'; 

     } 
     return (<div> 
       <button onClick={this._handleClick.bind(this)}>{buttonText}</button> 
       {seriesNodes} 
      </div> 
     ); 
    } 

    _GetList() { 
     var myInit = { 
      method: 'GET', 
      headers: new Headers({ 
       'Content-Type': 'text/plain' 
      }), 
     } 
     var myRequest = new Request('data.json', myInit); 
     fetch(myRequest) 
      .then(function (response) { 
       return response.json() 
        .then(function (json) { 
         console.log(json) 
         json.manga.map((item) => { 
          var li = document.createElement('li'); 
         // for (var i = 0; i < (item).length; i++) { 
           li.innerHTML = 'Name: ' + item.t + ', Genre: ' + item.c + ' Hit Count: ' + item.h; 
           document.getElementById('myDiv').appendChild(li); 
         // } 
         }) 
        }) 

      }) 
      .catch(function (error) { 
       console.log('There has been a problem with your fetch operation: ' + error.message); 
      }); 

     return (
      <div> 
       <div></div> 
      </div> 
     ) 
    } 

    _handleClick() { 
     this.setState({showSeries: !this.state.showSeries}); 
    } 
} 
render(<Series />, document.getElementById('myDiv')); 

Answer 1

Вы собираетесь об этом немного неправильно с точки зрения мышления в React. Не используйте document.CreateElement() для создания div. Это не виртуальные элементы, которые вы хотите в React. Вы также не динамически создаете html в React, вы динамически создаете данные в html или условия, которые отображают этот html (booleans).

Примечание: Если вы хотите использовать вызов API более одного раза, вы должны использовать React lifecycle methods и, возможно, componentDidUpdate. Вы не должны вызывать методы api в render(), поскольку это должно быть только для построения виртуального html.

На первый рендер, buttonText будет неопределенным, но мы не заботимся

import React from 'react'; 
import {render} from 'react-dom'; 

const SHOWN_BUTTON_TEXT = "Show Series"; 
const HIDDEN_BUTTON_TEXT = "Hide Series"; 

class Series extends React.Component { 
    constructor() { 
     super(); 

     //Bind in the constructor instead so we don't create a new function every render like you were doing 
     this._handleOnClick = this._handleOnClick.bind(this); 
     this.fetchSeries= this.fetchSeries.bind(this); 

     this.state = { 
      buttonText: HIDDEN_BUTTON_TEXT, 
      showSeries: false, 
      listItems: {} 
     }; 
    } 

    render() { 
     return (<div> 
        <button onClick={this._handleOnClick}>{this.state.buttonText}</button> 
        <ul> 
         {this.state.listItems.map(item => <Item {...item}/>)} 
        </ul> 
       </div> 
     ); 
    } 
    _handleOnClick() { 
     this.setState({showSeries: !this.state.showSeries}); 
     this.setState({buttonText: SHOWN_BUTTON_TEXT ? this.state.showSeries : HIDDEN_BUTTON_TEXT}) 
    } 
    fetchSeries() { 
     var myInit = { 
      method: 'GET', 
      headers: new Headers({ 
       'Content-Type': 'text/plain' 
      }), 
     } 
     var myRequest = new Request('data.json', myInit); 
     fetch(myRequest) 
      .then(function (response) { 
       return response.json() 
        .then(function (json) { 
         this.setState({listItems: json}); 
        }.bind(this) 

      }) 
      .catch(function (error) { 
       console.log('There has been a problem with your fetch operation: ' + error.message); 
      }); 
    } 
    componentDidMount() { 
     this.fetchSeries(); 
    } 
} 

Stateless function

//Instead of passing in props as argument we can pass in the values directly 
function Item ({t, c, h}) { 
    return (
     <li> 
      Name: {t}, 
      Genre: {c}, 
      Hit Count: {h} 
     </li> 
    ); 
} 

render(<Series />, document.getElementById('myDiv'));