Перейти к предыдущему состоянию или компоненту Ren Render для двух разных функций API в ReactJS - PullRequest
Новая
       21

Перейти к предыдущему состоянию или компоненту Ren Render для двух разных функций API в ReactJS

0 голосов
/ 06 февраля 2019

У меня есть 2 разные функции, которые выбирают разные данные из API, поэтому я разделил их, чтобы обновить необходимые данные.

После повторного нажатия на предыдущий элемент меню (Все) предыдущая функция (updateLanguage) должна сработать или повторно визуализировать весь компонент, чтобы получить данные.

Ниже приведена функция API 

export function fetchPopularRepos(category_id) {
    var encodedURI = window.encodeURI(
      'http://www.mocky.io/v2/5c44710d3200004f00af156bsds'
    );
    return axios.get(encodedURI).then(function(response) {
      return response.data.sub_videos;
    });
}

export function fetchPopularReposUpdated(homepage) {
    var encodedURI = window.encodeURI(
      'http://www.mocky.io/v2/5c5acfb43200007b274ec75dsdsd'
    );
    return axios.get(encodedURI).then(function(response) {
      return response.data.sub_videos;
    });
}

Ниже приведен код компонента 

class Playground extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedLanguage: 'All', // default state
      repos: null
    };
    this.updateLanguage = this.updateLanguage.bind(this);
    this.updateLanguagenew = this.updateLanguagenew.bind(this);
  }
  componentDidMount() {
    this.updateLanguage(this.state.selectedLanguage);
  }
  updateLanguage(lang) {
    this.setState({
      selectedLanguage: lang,
      repos: null
    });

    fetchPopularRepos(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  updateLanguagenew(lang) {
    this.setState({
      selectedLanguage: lang,
      repos: null
    });
    fetchPopularReposUpdated(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  render() {
    console.log (fetchPopularRepos);
    return (
      <div>
        <div>{this.state.selectedLanguage}</div>
        <SelectLanguage
          selectedLanguage={this.state.selectedLanguage}
          onSelect={this.updateLanguagenew}
        />
        {
        !this.state.repos ? (
          <div>Loading</div>
        ) : (
          <RepoGrid repos={this.state.repos} />
        )}
      </div>
    )
  }
}

Нижекод для создания меню 

function SelectLanguage(props) {
  const languages = [
    'All',
    'Javascript',
    'Ruby',
    'Java',
    'CSS',
    'Python',
    'PHP',
    'Shell'
  ];

  return (
    <ul className="languages">
      {languages.map(lang => (
        <li
          className={lang === props.selectedLanguage ? 'selected' : ''}
          onClick={props.onSelect.bind(null, lang)}
          key={lang}
        >
          {lang}
        </li>
      ))}
    </ul>
  );

1 Ответ

0 голосов
/ 06 февраля 2019

В методе updateLanguagenew вы можете проверить, является ли выбранный язык All, а затем вызвать метод updateLanguage 

updateLanguage(lang) {
    this.setState({
      selectedLanguage: lang,
      repos: null
    });

    fetchPopularRepos(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
  }

  updateLanguagenew(lang) {
    if (lang === 'All') {
        this.updateLanguage(lang);
        return;
    }
    this.setState({
      selectedLanguage: lang,
      repos: null
    });
    fetchPopularReposUpdated(lang).then(
      function (repos) {
        this.setState(function () {
          return { repos: repos };
        });
      }.bind(this)
    );
}
...