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

Question

我正在开发react应用程序，在该应用程序中，我需要按下按钮调用API，API响应应与显示第二个组件的内容一起传输到第二个部件。我该怎么做？

Answer 1

实现这一点的一种方法是将提取的数据保存在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>
);
}
}

Answer 2

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

当一个组件中的事件填充另一个组件的数据时，您应该通过将数据保留在包含按钮组件和显示组件的父组件中来处理此问题。