反应如何将变量传递给不同的函数

Question

我是新来的！但是这里...

我创建了一个使用 JSON url 的组件，然后在一个相当反应性的组件中吐出新闻提要。

  // Grabs the posts from the json url
  public getPosts() {
    axios
      .get("https://cors-anywhere.herokuapp.com/" + this.props.jsonUrl)
      .then(response =>
        response.data.map(post => ({
          id: `${post.Id}`,
          name: `${post.Name}`,
          summary: `${post.Summary}`,
          url: `${post.AbsoluteUrl}`,
          imgUrl: `${post.ListingImageUrl}`
        }))
      )
      .then(posts => {
        this.setState({
          posts,
          isLoading: false
        });
      })
    // We can still use the `.catch()` method since axios is promise-based
    .catch(error => this.setState({ error, isLoading: false }));
  }

我已将其设置为用户将在 UI 中输入 JSON url，但现在我需要使其与下拉选择一起使用，因此我创建了处理此问题的 switch 语句。

  // This will update the json URL for getPosts
  public getCompanyUrl() {
    let url: string = '';
    switch (this.props.listName) {
      case "company1":
        url = "http://example1.co.uk";
        break;
      case 'company2':
        url = "http://example2.co.uk";
        break;
      case 'company3':
         url = "http://example3.co.uk";
        break;
      case 'company4':
        url = "http://example4.co.uk";
        break;
      case 'company5':
        url = "http://example5.co.uk";
        break;
      case 'company6':
        url = "http://example6.co.uk";
        break;
      default:
        url = '';
    }
    console.log(url);
  }

我一直不确定如何更新：

.get("https://cors-anywhere.herokuapp.com/" + this.props.jsonUrl)

取switch语句url变量代替this.props.jsonUrl.

有什么想法吗？！ :)

Answer 1

首先确保 getCompanyUrl return 是 url 的值，并且它接受 listName 参数。（不直接在这个函数中调用 props 将确保它是纯的并且更可测试）。

public getCompanyUrl(listName) {
    switch (listName) {
      case "company1":
        return "http://example1.co.uk";
      case 'company2':
        return "http://example2.co.uk";
      case 'company3':
         return "http://example3.co.uk";
      case 'company4':
        return "http://example4.co.uk";
      case 'company5':
        return "http://example5.co.uk";
      case 'company6':
        return "http://example6.co.uk";
      default:
        throw new Error();
    }
  }

然后在您的 getPosts() 函数中，您可以调用此函数来 return 公司的相关 URL：

 axios
      .get(getCompanyUrl(this.props.listName))
    .......

或者，您可以通过将 getCompanyUrl 转换为 key/value 对象然后从那里查找值来简化此操作：

const companies = {
  "company1: "http://example1.co.uk",
  "company2: "http://example2.co.uk",
  "company3: "http://example3.co.uk",
  "company4: "http://example4.co.uk",
  "company5: "http://example5.co.uk",
  "company6: "http://example6.co.uk"
}

  axios
      .get(companies[this.props.listName])
    .......

反应如何将变量传递给不同的函数

React how to pass variable to different function

javascript

reactjs

spfx