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

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>
  );
};

Class 组件

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 并将数据传递给另一个组件

Calling API and passing data to another component

reactjs

react-redux

react-redux-form