时间戳

首页 > 解决方案 > 如何在函数中添加这个到handleChange和componentDidMount的回调？

javascript - 如何在函数中添加这个到handleChange和componentDidMount的回调？

问题描述

如何在函数中添加这个到handleChange和componentDidMount的回调？

// callback from github api /api.github.com/repos/{user}/{repo}

const [repository, issues] = await Promise.all([
  api.get(`/repos/${repoName}`),
  api.get(`/repos/${repoName}/issues`, {
    params: {
      state: 'all', 
// I need change this by select options = all, closed and open (per example) 
     per_page: 5, 
    },
  }),
]);

// this define setState again in handleChange

this.setState({repository: repository.data,
issues: issues.data,
loading: false,
});


// Example: 

componentDidMount () {functionUP();};

handleChange () {functionUpAgain(with state from params = all, open or closed);
};

标签： javascriptreactjscallback

解决方案

好吧，因为您正在使用await您的功能需要async。

所以像

class YourComponent extends React.Component {
  // callback from github api /api.github.com/repos/{user}/{repo}
  async fetchData(state = 'all') {
    const [repository, issues] = await Promise.all([
      api.get(`/repos/${repoName}`),
      api.get(`/repos/${repoName}/issues`, {
        params: {
          state,
          // I need change this by select options = all, closed and open (per example) 
          per_page: 5,
        },
      }),
    ]);
    // this define setState again in handleChange

    this.setState({
      repository: repository.data,
      issues: issues.data,
      loading: false,
    });
  }

  // Example: 

  componentDidMount() {
    this.fetchData();
  };

  handleChange = () => {
    const somestate = 'open'; // here you decide what state to pass to the fetchData
    this.fetchData(somestate);
  };

  render() {

  }
}

我无法帮助如何让状态通过，fetchData因为您的代码没有显示它可能来自哪里。但是示例代码允许将参数fetchData传递给将传递给 API 的方法。

您还应该考虑重构该代码，以便不总是调用api.get(/repos/${repoName} （因为它看起来不使用任何参数并且总是返回相同的数据）)

推荐阅读