Question

我正在使用我的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}`);

      } 
    }

  ...

  }

Answer 1

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

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

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

Answer 2

我唯一推荐的方法是导出userAccessToken，类似这样，但是您不能更改其值outside the module

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

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

Answer 3

如果您要阅读此问题，则可以解决。事实证明，我应该已经使用React生命周期方法Spotify.getUserAccessToken()从App.js调用了方法componentDidMount()。导出和导入方法就像模块的快照一样，因此，当我从userAccessToke导出变量Spotify.js到调用my方法之前，我导入了一个空字符串，并且它并没有在所有文件中更新。

感谢Jørgen和joseluismurillorios为您提供的支持和时间：）

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

3 个答案: