Reactjs 根据变量值动态更改的内容

我在一个页面上有两个选择元素， 第一个只有两个选项：电影和电视节目，默认设置为电影， 根据所选选项，第二个选择显示第一个选择的类型

例如：

如果选择的第一个选择值是“电影”，则第二个选择包含所有电影类型

而且，如果选择的第一个选择值是电视节目，则第二个选择包含所有电视节目类型 ,

我认为我所做的是可以的，但是当我更改第一个选择值时，第二个选择不会更改其选项

function handleMediaTypeChange(e) {
    setMediaType(e.target.value);
    forceUpdate();
}

function handleGenreChange(e) {
    setNameGenreChosen(
      $(".selected:eq(1)")
        .children("span")
        .text()
    );
    setIdGenreChosen(
      mediaType === "movie"
        ? moviesGenres.find(genre => genre.name === e.target.value).id
        : tvGenres.find(genre => genre.name === e.target.value).id
    );
    forceUpdate();
  }

<div className="row">
          <div className="input-field col s12 m6">
            <p>Choose your type of fiction</p>
            <select style={{ zIndex: "999" }} onChange={handleMediaTypeChange}>
              <option value="" disabled defaultValue>
                Choose your type of fiction
              </option>
              <option value="movie">Films</option>
              <option value="tv">TV shows</option>
            </select>
          </div>

          <div className="input-field col s12 m6">
            <p>Choose a category</p>
            {mediaType === "movie" ? (
              <select onChange={handleGenreChange}>
                <option value="" disabled defaultValue>
                  Select a category
                </option>
                {moviesGenres &&
                  moviesGenres.map(genre => (
                    <option value={genre.name} key={genre.id} id={genre.id}>
                      {genre.name}
                    </option>
                  ))}
              </select>
            ) : (
              <select onChange={handleGenreChange}>
                <option value="" disabled defaultValue>
                  Choisissez un genre
                </option>
                {tvGenres &&
                  tvGenres.map(genre => (
                    <option value={genre.name} key={genre.id} id={genre.id}>
                      {genre.name}
                    </option>
                  ))}
              </select>
            )}
          </div>
        </div>

我要做的是：根据mediaType值，我更改选择选项

代码非常密集，我必须剪切一些部分，但是如果你想，我可以向你展示整个代码

---

您可以在上面测试它：

我假设这是一个功能组件而不是类组件？另外，forceUpdate做什么？是的，功能组件带有挂钩，而forceUpdate是一个在执行函数后刷新组件的包。。我检查了网络请求，似乎每当您从选择菜单中选择一个新选项时，您都没有发出获取流派的请求。也许你可以给我看你提出请求的代码？是的，问题是我不知道如何在mediaType电影或电视节目更改时更改选择选项我不了解forceUpdate函数的用法，如果你正确使用了挂钩，那么react应该在更新值后重新渲染。