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

【问题标题】：How do I pass the data from one React.js file to another?如何将数据从一个 React.js 文件传递到另一个文件？
【发布时间】：2020-07-10 01:53:49
【问题描述】：

我想将数据从 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的User数据的props推送到我的其他页面？

【问题讨论】：

使用全局状态或查看redux

标签： html json reactjs dom local-storage

【解决方案1】：

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

【讨论】：

您好，我一直在查看，我不确定如何在 app.js 组件挂载时更新设置状态，因为这就是我想要做的？我知道如何使用单独的组件来完成，但不知道？

【解决方案2】：

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

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

【讨论】：