React表示我正在对未安装的组件执行状态更新，但是我的组件（似乎正在被安装）？

Question

原谅我，因为我知道我是导致此错误的人，但我不知道-我是React的新手。

我有一个最好能装上的组件。该组件从GitHub获取流行的存储库列表。该组件有效地允许您筛选语言返回的回购清单。该组件使用componentDidMount()生命周期方法向GitHub API发出请求。之后，单击不同的Nav元素将请求发送到GitHub API。返回的存储库列表以状态缓存。

似乎很重要，注意该错误仅在页面加载和刷新时发生。向第三方API发送新请求以获取新的回购清单不会产生错误。令我感到困惑的是，该应用程序似乎可以正常运行-在页面加载时，我获得了正确显示的回购清单（显示在某些卡组件中）。

组件本身是：

export default class Popular extends React.Component {
  state = {
    selectedLanguage: 'All',
    repos: {},
    error: null
  }

  componentDidMount() {
    this.updateLanguage(this.state.selectedLanguage)
  }

  updateLanguage = (selectedLanguage) => {
    this.setState({
      selectedLanguage,
      error: null
    })

    if (!this.state.repos[selectedLanguage]) {
      fetchPopularRepos(selectedLanguage)
        .then(data => {
          this.setState(({ repos }) => ({
            repos: {
              ...repos,
              [selectedLanguage]: data,
            }
          }))
        })
        .catch(() => {
          console.warn('Error fetching repos: ')

          this.setState({
            error: 'There was an error fetching the repositories.'
          })
        })
    }
  }

  isLoading = () => {
    const { selectedLanguage, repos, error } = this.state;

    return !repos[selectedLanguage] && error === null
  }

  render() {
    const { selectedLanguage, repos, error } = this.state

    return (
      <React.Fragment>
        <LanguagesNav
          selected={selectedLanguage}
          onUpdateLanguage={this.updateLanguage}
        />

        {this.isLoading() && <Loading text='Fetching Repos' />}

        {error && <p className='center-text error'>{error}</p>}

        {repos[selectedLanguage] && <ReposGrid repos={repos[selectedLanguage]} />}
      </React.Fragment>
    )
  }
}

[在浏览器中，我得到了“无法在未安装的组件上执行状态更新”，并且React Dev Tools指示错误来自setState调用返回的诺言中的fetchPopularRepos。

从第三方API进行的提取如下所示：

export function fetchPopularRepos(language) {
  const endpoint = window.encodeURI(`https://api.github.com/search/repositories?q=stars:>1+language:${language}&sort=stars&order=desc&type=Repositories `);

  return fetch(endpoint)
    .then(res => res.json())
    .then(data => {
      if (!data.items) {
        throw new Error(data.message)
      }

      return data.items
    })
}

以及我在其中呈现App组件的index.js：

class App extends React.Component {
  state = {
    theme: 'light',
    toggleTheme: () => {
      this.setState(({ theme }) => ({
        theme: theme === 'light' ? 'dark' : 'light'
      }))
    }
  }

  render() {
    return (
      <Router>
        <ThemeProvider value={this.state}>
          <div className={this.state.theme}>
            <div className='container'>
              <Nav />

              <Switch>
                <Route exact path='/' component={Popular} />
                <Route exact path='/battle' component={Battle} />
                <Route path='/battle/results' component={Results} />
                <Route component={NotFound} />
              </Switch>
            </div>
          </div>
        </ThemeProvider>
      </Router>
    )
  }
}

编辑：添加了堆栈跟踪的屏幕截图。编辑2：添加了Router / index.js文件

Answer 1

我之前做了您的工作，这是因为ThemeProvider。

您正在ThemeProvider中设置Router的主题。

尝试在其他组件的ThemeProvider之外定义Router：

App.js：

class App extends React.Component {
  state = {
    theme: 'light',
    toggleTheme: () => {
      this.setState(({ theme }) => ({
        theme: theme === 'light' ? 'dark' : 'light'
      }))
    }
  }

  render() {
    return (
        <ThemeProvider value={this.state}>
          <div className={this.state.theme}>
            <Routes />
          </div>
        </ThemeProvider>
    )
  }
}

Routes.js：

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <div className="container">
          <Nav />
          <Switch>
            <Route exact path="/" component={Popular} />
            <Route exact path="/battle" component={Battle} />
            <Route path="/battle/results" component={Results} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </Router>
    )
  }
}