Question

我正在使用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状态数组中传递它是否有数据，然后更新此类中的错误状态数组。

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

Answer 1

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道具

Answer 2

我大多同意Red Mercury提供的代码，但在AdminLandingPage中设置状态除外。一旦道具在组件内部可用，您将不需要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 (
    ...
  );
}

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

2 个答案: