如何将状态值从一个组件访问到位于单独文件中的其他功能（不是组件）？反应js

Posted 2023-02-23

【中文标题】如何将状态值从一个组件访问到位于单独文件中的其他功能（不是组件）？反应js

【英文标题】：How to access state value from one component to other function(not component) which is in separate file? React js

【发布时间】：2018-09-22 08:01:21

【问题描述】：

这是我的主页组件：

import React from 'react';
import  getData  from '../../../util/network';

export default class Home extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      page: 1,
    ;
  

  async componentWillMount() 
    const val = await getData();
  

  render() 
    return() 
      // jsx stuffs
    
  

这是一个名为 network.js 的文件：//这是一个函数

export const getData = () => 
  const  page  = this.state; // this is undefined now
  const url = `http://randomuser.in/$page`;
  fetch(url)
    .then(res => res.json())
    .then(res => 
      return res;
    )
    .catch(error => 
      console.log('error:', error);
    );
;

如何在我的network.js文件中访问页面的状态值？

【问题讨论】：

如果你想访问状态，你的 getData() 函数需要是你组件类中的一个方法。组件状态仅存在于该组件内。

或者将状态作为参数传递给getData()

有什么方法吗？从单独的文件访问

据我所知，您无法从一些随机不相关的 JS 文件中访问组件状态。要么将其作为参数传递，要么将getData 函数嵌入到组件中

【参考方案1】：

您应该将page 状态作为参数传递给您的函数：

async componentDidMount() 
  const val = await getData(this.state.page);

请注意，我将 componentWillMount 替换为 componentDidMount，这是执行异步操作的首选。

export const getData = (page) => 
  const url = `http://randomuser.in/$page`;
  fetch(url)
    .then(res => res.json())
    .then(res => 
      return res;
    )
    .catch(error => 
      console.log('error:', error);
    );
;

【讨论】：

如果我把控制台放在 network.js 中的页面，它会告诉我“未定义”。

您是否将参数传递给 getData 像这样：getData(this.state.page); ？

【参考方案2】：

你不应该在你的函数中依赖this.state。这不是一个好习惯。您应该只传递该函数所需的参数/参数。

示例

const val = await getData(this.state.page);

---

export const getData = (page) => 
  // use page argument that passed
  //...
;

【讨论】：

如果我把控制台放在 network.js 中的页面，它会告诉我“未定义”。

确保将参数传递给函数，并确保它定义了一些值。