javascript - 如何在 React 中单击按钮时从服务器转储数据？

Question

我正在尝试通过 fetch 函数从服务器获取数据。但我需要在这些按钮之后显示这些数据。如果没有按钮，则显示数据。这是我的代码：

import React, {Component} from "react";
export default class Ccomponent extends Component{
  constructor(props){
    super(props);
    this.state = {
      items: [], index: ''
    };
  }

  componentDidMount(){
    fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          items: result
        });
      }
    )



  }

  render(){
    const {items} = this.state;
    return(
<div>
<button key={index}
      onClick={() => {
      {items.map(item => (
        <blockquote>
        <i key={item.name}>
        Name: </i> {item.name};

        </blockquote>
      ))}
    }}>klik</button>

</div>
    )
  }
}

标签： javascriptnode.jsjsonreactjsbutton

Answer 1

export default class Ccomponent extends Component{
  constructor(props){
   super(props);
    this.state = {
    items: [], index: '', showResult: false
    };
  }
  handleClick() { 
   this.setState({showResult: true});
  }
  componentDidMount(){
    fetch("https://jsonplaceholder.typicode.com/users")
    .then(res => res.json())
    .then(
     (result) => {
    this.setState({
      items: result
    });
     }
   )



   }

  render(){
     const {items} = this.state;
     return(
      <div>
        <button key={index} onClick={this.handleclick.bind(this)}>klik</button>
        {showResults ? 
          items.map(item => (
           <blockquote>
            <i key={item.name}>
            Name: </i> {item.name};
           </blockquote>
          ))
          : null
        }
      </div>
     )
   }
  }