React.js中如何在独立文件的非组件函数中访问组件状态值？

你遇到的问题很典型：getData是一个独立的工具函数，它不属于React组件的方法，所以没有组件实例的this上下文，直接使用this.state自然会得到undefined。下面给你几个简单可行的解决方案：

方案1：将page作为参数传递给getData #

这是最直接也最推荐的方式，把组件需要的状态值作为参数传入工具函数。

首先修改network.js中的getData函数，让它接收page参数：

// network.js
export const getData = (page) => {
  const url = `http://randomuser.in/...?page=${page}`;
  // 这里补充你的请求逻辑，比如使用fetch/axios
  return fetch(url)
    .then(response => response.json())
    // 后续数据处理...
};

然后在Home组件中调用时，把当前state的page传进去：

// Home组件
async componentDidMount() { // 建议替换过时的componentWillMount
  const val = await getData(this.state.page);
  // 拿到数据后可以更新state，比如this.setState({ data: val })
}

方案2：封装为参数对象（适合多参数场景） #

如果后续getData需要多个参数（比如page、limit、searchKey等），可以把参数封装成一个对象传递，这样函数的扩展性更好：

// network.js
export const getData = ({ page }) => {
  const url = `http://randomuser.in/...?page=${page}`;
  // 请求逻辑...
};

组件中调用：

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

为什么原来的代码会报错？ #

因为getData是一个独立导出的函数，它的执行上下文并不是你的Home组件实例。在严格模式下（React项目默认开启），独立函数中的this会指向undefined，所以自然无法访问到组件的this.state。

小提示：React官方已经标记componentWillMount为过时钩子，推荐使用componentDidMount来发起数据请求，它会在组件挂载完成后执行，更符合数据请求的最佳实践，也能避免服务器渲染时的一些潜在问题。

内容的提问来源于stack exchange，提问作者Sameer