有条件地渲染 useEffect fetch React

斯科茨代尔

制作视频游戏剪辑发布应用程序。我在后端有一个控制器，它将按照对剪辑的评论最多到最少的顺序为我提供剪辑。我想在正常排序数据之间切换，使用选择标签从最多评论到最少评论（稍后我将添加更多过滤器）。我希望我可以根据选择标记 onChange 的状态有条件地渲染这两个提取，但我得到了一个错误。

 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));
    }, []);
  }

一定的表现

正如错误所说，你不能useEffect有条件地打电话。相反，无论如何都调用它一次，然后在该函数中查看是否需要获取剪辑或评论。

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
    }
}, []);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。