我如何将数据从一个React.js文件传递到另一个文件？

Question

我想将数据从App.js传递到React中的另一个.js文件。 Atm，我正在文件之间的本地存储中读写，但这似乎效率很低。我只想在挂载App.js组件时从本地存储中提取一次。这就是我目前正在做的。

App.js：

 constructor(props) {
    super(props);
    this.state = {
      user: {},
      user_data: (localStorage.getItem('user_data')),
    }
    this.authListener = this.authListener.bind(this);
  }  
 componentDidMount() {
    this.authListener();

  }

//checks firebase for authentication
  authListener() {
    Authentication.auth().onAuthStateChanged((user) => {
      console.log(user);
      if (user) {
        this.setState({ user });
        localStorage.setItem('user', user.uid);
        this.pulldata_Health();
        this.pulldata_Meals();
        this.pulldata_Ingredients();
      } else {
        this.setState({ user: null })
        localStorage.removeItem('user');
        localStorage.removeItem('user_data')
      }
    });
  }

  //connects to database and stores data to local storage
  pulldata_Health() {
    database.collection('Health_data')
      .doc(localStorage.getItem('user'))
      .get()
      .then(doc => {
        const data = doc.data();
        localStorage.setItem('user_data', JSON.stringify(data));
        console.log(JSON.parse(localStorage.getItem('user_data')))
      }).catch(function (error) {
        console.error("Error reading health", error);
      });

Homepage.js：

     constructor(props) {
            super(props);
            this.state = {
                healthData: (JSON.parse(localStorage.getItem('user_data')))
            }
        }
  componentDidMount() {
        this.GoalChecker();
        console.log(this.state.healthData);
    }

    GoalChecker() {
        if (this.state.healthData !== null) {

            if (this.state.healthData.goal === 'Gain') {
                this.setState({ gainImage: true });
                this.setState({ recompImage: false });
                this.setState({ loseImage: false });
                console.log('gainimg')
            }

            if (this.state.healthData.goal === 'Recomp') {
                this.setState({ gainImage: false });
                this.setState({ recompImage: true });
                this.setState({ loseImage: false });
                console.log('recompimg')
            }

            if (this.state.healthData.goal === 'Lose') {
                this.setState({ gainImage: false });
                this.setState({ recompImage: false });
                this.setState({ loseImage: true });
                console.log('loseimg')
            }
        }
    };

这都可以，但是每次加载此页面时从本地存储中拉取似乎效率低下。有什么方法可以将用户数据的道具从App.js推送到我的其他页面吗？

Answer 1

我很难解释，但是我将向您展示YouTube上的一个视频，该视频如何使用react-hooks。这不是一个非常困难的方法https://youtu.be/XuFDcZABiDQ

Answer 2

您可以使用react上下文。在应用程序顶部的app.js /中创建上下文。使用上下文组件包装顶级容器。然后，在任何子组件中，您都可以在全局上下文中访问道具。

一个很好的说明它的教程在这里，https://kentcdodds.com/blog/how-to-use-react-context-effectively