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

Question

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

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

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

堆栈闪电战： 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

标签： javascriptjsonreactjsecmascript-6state

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