Question

我希望保持我的文件尽可能干净和可重用，所以当我在componentDidMount()函数中请求我的数据时，我想调用一个从不同文件返回数据的函数。

目前我有这个：

import NewsService from './news/service/news.service.js';
componentDidMount(){
  NewsService.logData;
}

另一个文件：

const Test = {
  logData: getData()
}

function getData(){
  console.log('test')
  data = [];
  return data
};

export default Test;

但那不起作用。实际上，它会在加载时记录test，这是可以理解的

Answer 1

问题在于您通过运行该函数来定义属性logData的值。您需要做的是传递对getData函数的引用，然后随意调用它。

const Test = {
  logData: getData
}

// or

const Test = {
  logData: (props) => getData(props)
}


function getData(props){
  console.log('test', props)
  data = [];
  return data
};

然后..

componentDidMount(){
  NewsService.logData({foo: 'bar'});
}

这假设您希望在componentDidMount期间获取数据，而不仅仅是在应用加载并将其存储在logData属性中时。

更新：修改示例以包含传递参数。请注意，在第一个示例中，您不必指定props，因为函数引用本身正在传递，因此您只需在触发时添加props。但是，在第二个示例中，您必须指定props（因为您基本上创建了一个将返回getData的新函数）。所以你必须将道具传递给它。

从不同的文件调用函数

1 个答案: