Question

我有一个名为Dashboard的主要组件，该组件加载了另一个名为Activity的组件，活动加载到页面上就很好了。这是活动：

export default class Activity extends Component{

constructor(props) {
super(props);
this.state = {
    FlatListActivityItems: [],
    activity:'',
    isWeightModalVisible:false,
    currentDate: new Date(),
    markedDate: moment(new Date()).format("YYYY-MM-DD")
};

db.transaction(tx => {
  tx.executeSql('SELECT * FROM activityStatus', [], (tx, results) => {
    var temp = [];
    for (let i = 0; i < results.rows.length; ++i) {
      temp.push(results.rows.item(i));
    }
    this.setState({
      FlatListActivityItems: temp,
    });
  });
});

}

render() { ....

}

在组件中加载并执行我需要的操作。但是，我需要访问FlatListActivityItems数组以设置仪表板中某些内容的状态。

在仪表板组件中，我像这样加载它：

export default class Dashboard extends Component{

  state = {
    activity:'',
  };
    render() {
    return(

    <Activity navigation={this.props.navigation} />
    )
    }
}

All I want to do in this case is take the first item in the FlatListActivityItems array with value activity (FlatListActivityItems[0].activity) and set it to the state for activity in dashboard so that I can access the state 'activity' in my dashboard class that loads the activity class.

How can I do that?

Answer 1

将功能传递给Activity作为道具，在您的数据库查询中调用该函数以在Dashboard中设置活动。

export default class Dashboard extends Component{

  state = {
   activity:'',
  };

  setActivity = (activity) => { 
    this.setState({ activity })
  }

  render() {
    return(
      <Activity 
        setActivity={this.setActivity} 
        navigation={this.props.navigation} />
    )
  }
}

设置活动，您可以在其中设置数据库的初始数据。

db.transaction(tx => {
    tx.executeSql('SELECT * FROM activityStatus', [], (tx, results) => {

    var temp = [];
    for (let i = 0; i < results.rows.length; ++i) {
      temp.push(results.rows.item(i));
    }
    // set activity in Dashboard
    this.props.setActivity(temp[0].activity);

    this.setState({
      FlatListActivityItems: temp,
    });
  });
});

Answer 2

如果Activity组件的作用是显示活动项目，则可以将Dashboard组件用作保存状态的逻辑组件。

然后，要显示活动，您可以将该列表作为道具传递给Activity组件。

<Activity navigation={this.props.navigation} entries={this.state.activity}/>

然后您的Activity组件将使用this.props.entries中的列表，而不是单独加载它。

反应本机应用程序，访问子组件并根据其设置状态

2 个答案: