问我在一个React组件上进行了一个API调用，从中获取数据，并将其传递给一个状态。我也想在另一个组件上使用相同的数据
EN

Stack Overflow用户

提问于 2021-07-13 21:56:27

回答 1查看 34关注 0票数 0

正如标题所说，我已经从组件上的API中获取了数据。我希望该组件只是充当获取数据的“存储”，同时将这些数据呈现到另一个组件上。如果这是可能的，我该怎么做？

这是Fetch.js，它应该从API中获取数据并将其存储在state的person中。现在，我想将存储在person中的对象拆分到不同的var中，就像fname、lname等。

import React from "react";
export default class Fetch extends React.Component {
state = {
loading: true,
person: null,
 };

async componentDidMount() {
console.log("mounted");

const url = "https://api.randomuser.me/";
const response = await fetch(url);
const data = await response.json();
this.setState({
  loading: null,
  person: data.results[0],
});
}

render() {
return console.log(this.state.fname);
 }
}

现在，上面所说的一切都完成了，我有了另一个文件Main.js，我想在其中显示从Fetch.js获取的数据(分解为每个变量，如fname、lname)。

import React from "react";
export default class Main extends React.Component {
render() {
return (
  <div>
    {this.state.loading || !this.state.person ? (
      <div>Loading</div>
    ) : (
      <div>
        Name: {this.state.fname} {this.state.lname}
      </div>
    )}
  </div>
       );
      }
     }

javascript

reactjs

回答 1

Stack Overflow用户

发布于 2021-07-13 22:09:57

您可以将属性中的数据从父零部件传递给子零部件：

function ParentComponent() {
  const data = fetch(...);

  return <ChildComponent data={data} />
}
...
function ChildComponent(props) {
  const data = props.data;

  ...
}

但是，如果您可能需要在许多组件中使用该数据(或者说对子组件有一堆层)，那么使用React的上下文来实现此目的将更加方便：https://uk.reactjs.org/docs/context.html

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68363848

复制

相似问题

问我在一个React组件上进行了一个API调用，从中获取数据，并将其传递给一个状态。我也想在另一个组件上使用相同的数据
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我在一个React组件上进行了一个API调用，从中获取数据，并将其传递给一个状态。我也想在另一个组件上使用相同的数据EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我在一个React组件上进行了一个API调用，从中获取数据，并将其传递给一个状态。我也想在另一个组件上使用相同的数据
EN