“用道具更新状态”或 idk

Question

目前我正在学习 ReactJS 课程，但它有点过时了，所以我正在尝试它，目的是在当前版本中练习 ReactJS。

那家伙做了类似的东西：

然后：

我正在尝试通过“setState”来实现这一点，但我收到一条错误消息，指出“所选类型”未定义。

这是我的代码：

  const handleGenreSelect = (genre) => {
    setAllGenres((prevState) => ({
      ...prevState,
      selectedGenre: genre,
    }));
  };

我希望更新状态并在用户点击它时将 listGroup 项目设置为活动状态。

Answer 1

看起来您正在使用函数组件，这对于练习编写现代 React 代码非常有用，但我认为您可能会混淆课程中使用的旧类组件的格式和较新的函数式样式。

没有看到更多你的代码我不能确定，但它看起来像你想要做这样的事情：

const [genres, setGenres] = useState([]);
const [selectedGenre, setSelectedGenre] = useState(null);

const handleGenreSelect = (genre) => {
    setSelectedGenre(genre);
}

而在类组件中，您会调用

this.setState()

并同时将具有多个更新状态的对象传递给它，而在函数组件中，每个状态都会单独更新。

您调用的函数

setAllGenres()

看起来应该用于设置用户可以从中选择的完整流派列表。在我上面分享的示例中，我试图阐明您有两种不同的状态 - 一种用于所有流派，一种用于当前选定的流派。