在 React.js 中更新我导入的变量的值答案

【问题标题】：Updating my imported variable's value in React.js在 React.js 中更新我导入的变量的值
【发布时间】：2019-11-26 03:52:09
【问题描述】：

我正在重构使用 React.js 构建的应用程序。我正在从Spotify.js 的全局范围中导出一个变量，并将其导入到另外两个文件App.js 和Button.js 中。在从 Spotify.js 调用一个函数后，该函数将一个新值添加到变量中，它的新值被导出到 'Button.js' 但在 'App.js' 中保持一个空字符串。

您的帮助将不胜感激 :)


export let userAccessToken = '';
export const Spotify = {
  ...
  getUserAccessToken (){
    //stores a new string to userAccessToken.
    }
  }

  import {userAccessToken, Spotify} from '../../util/Spotify';

  export class App extends React.Component {
    //a conditional rendering happens depending on if(!userAccessToken)
  }

  import {userAccessToken, Spotify} from '../../util/Spotify'

  export class Button extends React.Component {

      componentDidMount() {

      if (!userAccessToken) {

        console.log(`Button's UAT before calling the fn: ${userAccessToken}`)
        Spotify.getUserAccessToken();
        console.log(`Button's UAT after calling the fn: ${userAccessToken}`);

      } 
    }

  ...

  }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这不是您在 React 组件之间共享数据的方式。

使用反应上下文或在组件之间传递道具

您可以使用react context 共享数据或简单地将其作为道具传递（如果组件在组件树中密切相关）

【讨论】：

嘿 Jørgen，感谢您的重播 :) 我的上下文和道具用于在反应组件之间向下传递信息，但是（我没有提到的是..）我正在寻找一种方法将信息从实用程序文件Spotify.js 传递到反应组件App.js。正如我上面提到的，这似乎适用于不同的组件Button.js。我应该链接我的回购吗？
感谢您的时间和支持 :)

【解决方案2】：

我唯一可以推荐的是导出userAccessToken，类似这样，但你不能改变它的值outside the module

export const Spotify = {
  ...
  getUserAccessToken (){
    //stores a new string to userAccessToken.
    }
  }
  ...
}

const accessToken = Spotify.getUserAccessToken();
export const userAccessToken = accessToken;

【讨论】：

感谢您的时间和支持 :)

【解决方案3】：

如果你读到这个问题，我就解决了。原来我应该使用反应生命周期方法componentDidMount() 从App.js 调用我的方法Spotify.getUserAccessToken()。导出和导入方法就像模块的快照，因此当我在调用 my 方法之前从 Spotify.js 导出变量 userAccessToke 时，我导入了一个空字符串，并且它没有在所有文件中更新。

感谢 Jørgen 和 joseluismurillorios 的支持和花时间回答 :)

【讨论】：