有条件地呈现使用效果提取反应

Question

制作视频游戏剪辑发布应用程序。我有一个在后端的控制器，可以为我提供剪辑，按照对剪辑的大多数评论的顺序至少。我想通过使用SELECT标签在正常订购的数据之间切换到大多数评论（以后我会添加更多过滤器）。我希望我可以根据选择标签的状态有条件地渲染两个提取物，但是我有一个错误。

 Line 18:5:  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks
  Line 24:5:  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

这是我的代码。请注意，我只是在用布尔来测试它。

 const boolean = true;
  if (boolean == true) {
    useEffect(() => {
      fetch("/clips")
        .then((r) => r.json())
        .then((data) => setClipData(data));
    }, []);
  } else {
    useEffect(() => {
      fetch("/most_comments")
        .then((r) => r.json())
        .then((data) => setClipData(data));
    }, []);
  }

Answer 1

正如错误所说，您无法有条件地调用useffect。相反，无论如何，在该功能内部都将其称为一次，请查看您是否需要获取剪辑或评论。

useEffect(() => {
    if (boolean) {
        fetch("/clips")
            .then((r) => r.json())
            .then((data) => setClipData(data));
            // don't forget to .catch errors here
    } else {
        fetch("/most_comments")
            .then((r) => r.json())
            .then((data) => setClipData(data)); // did you mean to call setCommentsData or something here?
            // don't forget to .catch errors here
    }
}, []);