При нажатии вернуться в предыдущее состояние или вызвать функцию в Reactjs

Question

Я пытаюсь выполнить навигацию по фильтру и хочу вернуться в предыдущее состояние или вызвать функцию, чтобы получить данные из другого API.

При щелчке по этому состоянию я должен очистить фильтр, чтобы вернуть ответ от другого API.

Чтобы понять это полностью, пожалуйста, посмотрите на пример приложения, которое я создал ниже

Stackblitz: https://stackblitz.com/edit/react-3bpotn

Ниже находится компонент

    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) {
    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)
    );
  }

  render() {
    return (
      <div>
        <div>
        This is the current state : <strong style={{padding: '10px',color:'red'}}>{this.state.selectedLanguage}</strong>
        </div>

        <div style={{padding: '10px'}}>
        On click of above state I should be able to trigger this function <strong>(updateLanguage)</strong> again to clear the filter and load data from this API 
        </div>
        <p>Click the below options</p>
        <SelectLanguage
          selectedLanguage={this.state.selectedLanguage}
          onSelect={this.updateLanguagenew}
        />
        {//don't call it until repos are loaded
        !this.state.repos ? (
          <div>Loading</div>
        ) : (
          <RepoGrid repos={this.state.repos} />
        )}
      </div>
    );
  }
    }

Отображение компонента SelectLanguage для параметров фильтра:

class SelectLanguage extends Component {
  constructor(props) {
      super(props);
      this.state = {
            searchInput: '',
      };      
  }

  filterItems = () => {
    let result = [];
    const { searchInput } = this.state;
    const languages = [ {
    "options": [
      {
        "catgeory_name": "Sigma",
        "category_id": "755"
      },
      {
      "catgeory_name": "Footner",
      "category_id": "611"
      }
    ]
  }
  ];
  const filterbrandsnew = languages;
  let value
  if (filterbrandsnew) {
    value = filterbrandsnew[0].options.map(({catgeory_name})=>catgeory_name);
    console.log (value);
  }
  const brand = value;
    if (searchInput) {
        result = this.elementContainsSearchString(searchInput, brand);
    } else {
        result = brand || [];
    }
    return result;
  }
  render() {
        const filteredList = this.filterItems();
        return (
            <div className="filter-options">
                <ul className="languages">
                    {filteredList.map(lang => (
                        <li
                            className={lang === this.props.selectedLanguage ? 'selected' : ''}
                            onClick={this.props.onSelect.bind(null, lang)}
                            key={lang}
                        >
                            {lang}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}

Примечание. Это текущее состояние {this.state.selectedLanguage}, по щелчку этого я долженбыть в состоянии вызвать эту функцию.updateLanguage

Answer 1

То, как вы выполняете настройку состояния, является неправильным. Измените

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

На

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

Также Измените

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

На

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