如何将 React 中的状态从一个类传递到另一个类？

Posted 2023-02-22

【中文标题】如何将 React 中的状态从一个类传递到另一个类？

【英文标题】：How to pass state in React from one class to another?

【发布时间】：2016-11-30 19:01:06

【问题描述】：

我正在使用 ES6 类构建一个带有 React 的 Web 应用程序。我有一个 IndexPage.js 文件，它将数据添加到数据库和 AdminLandingPage.js 文件，它在它的 componentDidMount() 函数中读回数据库中当前的所有数据。

现在基本上两者都是分开工作的。我希望能够将数据保存在 IndexPage 中的状态（数组）中，然后将该状态传递给另一个文件，在那里我可以检查数组中是否有数据并设置表的状态（从而允许我不必刷新页面）。

IndexPage 在它的构造函数中有这个：

constructor(props) 
    super(props);

    this.state = newbugs: [];

这里我将数据添加到数据库并设置 newbugs 数组的状态：

addBug = (newBug) => 
  BugsApi.addBugData(newBug, data => 
    this.setState(newbugs: data)
  )

在我的 AdminLandingPage 构造函数中，我有：

constructor(props) 
    super(props);

    this.state = bugs: [];

和 componentDidMount() 函数，我正在读取数据库中当前的所有数据：

componentDidMount() 

    BugsApi.getBugData(data => 
      this.setState(bugs: data)
    )

^ 这是我想从我的 IndexPage 中传入 newbugs 状态数组的地方，检查其中是否有数据，然后更新此类中的 bugs 状态数组。

如果我能更清楚地回答我的问题，请告诉我。我现在已经被困了几个小时了。谢谢！

【问题讨论】：

你应该阅读文档，这就像反应 101 的东西在这里我只是用谷歌搜索了你的确切问题并得到了这个：facebook.github.io/react/tips/…

您对 DB 的读写操作是分开的。首先，您在 indexPage 中添加到 DB，然后在 AdminPage 中从 DB 中获取。假设您没有数据库，并且您从 API 获得了响应并将响应日期设置为 indexPage 状态变量，现在您必须在 adminPage 中使用 indexPage 状态变量。你将如何实现这一目标？这就是我们陷入的困境

【参考方案1】：

我基本同意 Red Mercury 提供的代码，但在 AdminLandingPage 内部设置状态除外。一旦组件内的 props 可用，您将不需要 AdminLandingPage 组件中的状态，除非您尝试执行未提及的其他操作。

class IndexPage extends React.Component 
  constructor(props) 
    super(props);
    this.state = newbugs: [];
  

  render() 
    return (
      <AdminLandingPage bugs=this.state.newBugs/>
    );
  


const AdminLandingPage = (props) 
  console.log(props.bugs); 
  return (
    ...
  );

【讨论】：

有什么办法可以做到这一点，而无需在 indexpage 中呈现管理页面？我只想传递道具而不是渲染组件。

最好的方法是使用 Redux（学习曲线很大，取决于您对 React 的熟悉程度）。 Redux 是管理 React 应用程序状态的好方法。

【参考方案2】：

state 应该在组件之间传递为props。例如：

class IndexPage extends React.Component 
  constructor(props) 
    super(props);
    this.state = newbugs: [];
  

  ...

  render() 
    return (
      <AdminLandingPage bugs=this.state.newBugs/>
    )
  


class AdminLandingPage extends React.Component 

  ...

  componentDidMount() 
    // `newBugs`constant holds the bugs passed down from IndexPage
    const newBugs = this.props.bugs;
    BugsApi.getBugData(data => 
      this.setState(bugs: data)
    )
  

  ...

这里IndexPage 将state.newBugs 传递给它的子组件AdminIndexPage 作为bugs 属性

【讨论】：

在这个例子中，你正在传递状态。我基本同意你的说法，但第一句话具有误导性。 “状态应该在组件之间作为道具传递”会更清楚

唯一的问题是我不想在索引页面中呈现管理页面。如果我将 <AdminLandingPage bugs=this.state.newBugs/> 放在你拥有它的地方，它会在其中呈现整个组件。

那么听起来像redux这样的数据管理库可以帮助你。在 redux 中，整个应用程序基本上都有一个 state。我真的推荐 redux 的创建者 Dan Abromov 的 egghead.io/courses/getting-started-with-redux。

但是如何将多个状态传递给另一个类？