显示/隐藏数据与提取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

你要对此稍有不妥的思维反应的条款。不要使用document.CreateElement()来创建div。这些不是您想要的React中的虚拟元素。您不会在React中动态创建HTML，您可以在HTML中动态创建数据或者呈现该HTML的条件（布尔值）。

注意：如果您想多次执行API调用，那么您应该使用React lifecycle methods并且可能使用componentDidUpdate。您不应该调用render()中的API方法，因为这应该只用于构建虚拟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'));