javascript - 单击返回到 Reactjs 中的先前状态或触发功能

Question

我正在尝试进行过滤器导航并希望返回到之前的状态或触发函数以从另一个 API 获取数据。

单击此状态后，我应该能够清除过滤器以返回来自另一个 API 的响应。

要完全理解它，请查看我在下面创建的示例应用

堆栈 Blitz :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}，点击它我应该能够触发这个功能。 更新语言

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