Question

我正在开发React应用程序，在该应用程序中，我需要按一下按钮来调用API，并且应该将API响应转移到第二个组件并显示第二个组件的内容。我该怎么办？

Answer 1

您的问题不是很具体。如果您想进行api调用，则在线上有很多教程。例如：https://reactjs.org/docs/faq-ajax.html

在一个组件中发生事件时，在另一个组件中填充数据，则应通过将数据保留在既包含按钮组件又包含显示组件的父组件中来处理该事件。

Answer 2

一种方法是将获取的数据保存在state内，并将其作为property传递给有条件呈现的子组件。

功能组件

import React, {useState} from 'react'

class ParentComponent {
  state = {
   data: undefined
}
  const handleClick = async () => {
    //fetchData
this.setState({data: fetchedData})
  };

  return (
    <div>
      <button onClick={this.handleClick}>Click me </button>
      {this.state.data && <Child data={this.state.data} />}
    </div>
  );
};

const Child = (props) => {
  return (
    //render data
    <div>{props.data}</div>
  );
};

类组件

import React from "react";

class ParentComponent extends React.Component {
  state = {
    data: undefined,
  };
  handleClick = async () => {
    //fetchData
    this.setState({ data: fetchedData });
  };
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click me </button>
        {this.state.data && <Child data={this.state.data} />}
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      //render data
      <div>{this.props.data}</div>
    );
  }
}

调用API并将数据传递到另一个组件

2 个答案: