一文教你如何避免React中常见的8个错误

 更新时间:2023年12月21日 08:34:53   作者:CUGGZ  
这篇文章主要来和大家一起分享在 React 开发中常见的一些错误,以及如何避免这些错误,理解这些问题背后的细节,防止犯下类似的错误,需要的可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

1. 组件卸载后执行状态更新

报错信息: Can’t perform a React state update on an unmounted component

这个报错就是因为在组件树的某个地方,状态更新被触发到已经卸载的组件上了。也就是说,我们不能在组件销毁后设置 state,防止出现内存泄漏。

1
2
3
4
5
6
7
8
9
const Component = () => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    fetchAsyncData().then((data) => setData(data));
  }, []);
 
  // ...
};

比如,在请求数据时,由于跳转到了B页面,A页面的数据请求还在进行中,但是页面已经销毁了,就会出现这种情况。那该如何解决这个问题呢?有两种方法:

(1)组件卸载时取消异步请求

第一种方法(推荐),就是在组件卸载时取消异步请求。一些异步请求库提供了取消异步请求的方法。如果没有使用第三方库,可以使用 AbortController 来取消。这种方法本质上就是在组件卸载时取消副作用:

1
2
3
4
5
6
7
8
9
10
11
12
13
const Component = () => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
    fetch(url, { signal: controller.signal }).then((data) => setData(data));
    return () => {
      controller.abort();
    }
  }, []);
 
  // ...
};

(2)跟踪组件是否已挂载

另外,可以跟踪组件的挂载状态,如果还没挂载或已经卸载,返回 false;否则返回 true:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Component = () => {
  const [data, setData] = useState(null);
  const isMounted = useRef(true);
 
  useEffect(() => {
    fetchAsyncData().then(data => {
      if(isMounted.current) {
        setData(data);
      }
    });
 
    return () => {
      isMounted.current = false;
    };
  }, []);
 
  // ...
}

不过,不建议使用这种方法。这样保留了未挂载组件的引用,可能会导致内存泄漏和性能问题。

2. 渲染列表时不使用 key

报错信息: Warning: Each child in a list should have a unique key prop

React 开发中最常见的就是遍历数组来渲染组件。在JSX中,可以使用Array.map将该逻辑嵌入到组件中,并在回调中返回所需的组件。如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Card } from "./Card";
 
const data = [
  { id: 1, text: "JavaScript" },
  { id: 2, text: "TypeScript" },
  { id: 3, text: "React" }
];
 
export default function App() {
  return (
    <div className="container">
      {data.map((content) => (
        <div className="card">
          <Card text={content.text} />
        </div>
      ))}
    </div>
  );
}

这样会收到如下警告:Warning: Each child in a list should have a unique key prop,这表示需要给生成的每个组件一个唯一的key。所以,要在map回调返回的JSX的最外层元素添加一个key值,该值应该是一个字符串或者数字,并且在这个组件列表中应该是唯一的。

1
2
3
4
5
6
7
8
9
10
11
export default function App() {
  return (
    <div className="container">
      {data.map((content) => (
        <div key={content.id} className="card">
          <Card text={content.text} />
        </div>
      ))}
    </div>
  );
}

尽管不遵守这个要求也不会导致应用崩溃,但它可能会导致一些意外的情况。React 会使用这些key来确定列表中的哪些子项发生了更改,并使用此信息来确定可以重用先前 DOM 的哪些部分,以及在重新渲染组件时应该重新计算哪些部分。 因此,建议添加 key。

3. Hooks 调用顺序错误

报错信息: React Hook "useXXX" is called conditionally. React Hooks must be called in the exact same order in every component render

先来看下面的代码:

1
2
3
4
5
6
7
8
9
const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);
 
  if (isOpen) {
    return <div>{/* ... */}</div>;
  }
  const openToggle = useCallback(() => setIsOpen(true), []);
  return <button onClick={openToggle}>{/* ... */}</button>;
};

isOpen 的值为true时,就会直接return那个div元素。这样当isOpen的值为truefalseuseCallback Hook的调用顺序就不一致了。这时React就会警告我们:React Hook "useCallback" is called conditionally. React Hooks must be called in the exact same order in every component render。这其实就是React官方文档中所说的,不要在循环,条件或嵌套函数中调用 Hook, 确保总是在 React 函数的最顶层以及任何 **return** 之前调用他们。遵守这条规则才能确保 Hook 在每一次渲染中都按照同样的顺序被调用。

可以这样来修改上面的代码:

1
2
3
4
5
6
7
8
9
const Toggle = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openToggle = useCallback(() => setIsOpen(true), []);
 
  if (isOpen) {
    return <div>{/* ... */}</div>;
  }
  return <button onClick={openToggle}>{/* ... */}</button>;
};

4. useEffect 缺少依赖

报错信息: React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array

先来看看 React 官网给出的例子:

1
2
3
4
5
6
7
8
9
function Example({ someProp }) {
  function doSomething() {
    console.log(someProp);
  }
 
  useEffect(() => {
    doSomething();
  }, []);
}

useEffect中定义空的依赖数组是不安全,因为它调用的 doSomething 函数使用了 someProp。这时就会报错:React Hook useEffect has a missing dependency: 'XXX'. Either include it or remove the dependency array。当props中的someProp发生变化时,函数doSomething的结果就会发生变化,然而useEffect的依赖数组为空,所以就不会执行回调中的内容。

有两种方式来解决这个问题:

useEffect中声明其所需函数,这种方式适用于只需要调用一次的函数,比如初始化函数:

1
2
3
4
5
6
7
8
function Example({ someProp }) {
  useEffect(() => {
    function doSomething() {
      console.log(someProp);
    }  
    doSomething();
  }, [someProp]);
}

使用useCallback来定义依赖项,确保当自身依赖发生改变时函数主体也会改变:

1
2
3
4
5
6
7
8
9
function Example({ someProp }) {
  const doSomething = useCallback(() => {
    console.log(someProp);
  }, [someProp])
 
  useEffect(() => {
    doSomething();
  }, [doSomething]);
}

5. 重新渲染过多

报错信息: Too many re-renders. React limits the number of renders to prevent an infinite loop

这个报错就是说重新渲染过多。React 限制渲染的数量以防止无限循环。当组件在很短的时间有太多状态更新时,就可能会发生这种情况。导致无限循环的最常见原因是:

  • 直接在渲染中执行状态更新;
  • 未向事件处理程序提供适当的回调。

如果遇到这个警告,可以检查组件的这两个方面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Component = () => {
  const [count, setCount] = useState(0);
 
  setCount(count + 1); // 渲染中的状态更新
 
  return (
    <div className="App">
      {/* onClick 没有正确的回调 */}
      <button onClick={setCount((prevCount) => prevCount + 1)}>
        Increment that counter
      </button>
    </div>
  );
}

6. 渲染的单条数据为对象

报错信息: Objects are not valid as a React child / Functions are not valid as a React child

在 React 中,我们可以在组件中渲染到 DOM 中的东西有很多,比如:HTML标签、JSX元素、原始 JavaScript 值、JavaScript 表达式等。但是不能将对象和函数渲染到 DOM 中,因为这两个值不会解析为有意义的值,如果渲染了对象或函数,就会报上面的错误。解决这个问题的方法很简单,就是检查渲染的内容是否是有效的值:

1
2
3
4
5
6
7
const Component = ({ body }) => (
  <div>
    <h1>{/* */}</h1>
    {/* 必须确保 body 是有效的 React child */}
    <div className="body">{body}</div>
  </div>
);

7. 相邻JSX元素没有包装在封闭标记中

报错信息: Adjacent JSX elements must be wrapped in an enclosing tag

这个报错就是说相邻JSX元素必须包装在封闭标记中,也就是必须要有一个根元素:

1
2
3
4
const Component = () => (
  <Nice />
  <Bad />
);

从 React 开发人员的角度来看,这个组件只会在另一个组件内部使用。 因此,在他们的心智模型中,从一个组件返回两个元素是有意义的,因为生成的 DOM 结构将是相同的,无论外部元素是在此组件中定义还是在父组件中定义。但是,React 无法做出这种假设。该组件可能会在根目录中使用并破坏应用,因为它会导致无效的 DOM 结构。

所以,应该始终将组件返回的多个 JSX 元素包装在一个封闭标记中。可以是一个元素、一个组件或者 React Fragment:

1
2
3
4
5
6
const Component = () => (
  <React.Fragment>
    <Nice />
    <Bad />
  </React.Fragment>
);

或者直接使用一个空标签来包装两个 JSX 元素:

1
2
3
4
5
6
const Component = () => (
  <>
    <Nice />
    <Bad />
  </>
);

8. 使用旧的状态

先来看一个计数器的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const Increaser = () => {
  const [count, setCount] = useState(0);
   
  const increase = useCallback(() => {
    setCount(count + 1);
  }, [count]);
   
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
   
  return (
    <>
      <button onClick={handleClick}>+</button>
      <div>Counter: {count}</div>
    </>
  );
}

这里的handleClick方法会在点击按钮后执行三次增加状态变量count的操作。那么点击一次是否会增加3呢?事实并非如此。点击按钮之后,count只会增加1。问题就在于,当我们点击按钮时,相当于下面的操作:

1
2
3
4
5
const handleClick = () => {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
};

当第一次调用setCount(count + 1)时是没有问题的,它会将count更新为1。接下来第2、3次调用setCount时,count还是使用了旧的状态(count为0),所以也会计算出count为1。发生这种情况的原因就是状态变量会在下一次渲染才更新。

解决这个问题的办法就是,使用函数的方式来更新状态:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const Increaser = () => {
  const [count, setCount] = useState(0);
   
  const increase = useCallback(() => {
    setCount(count => count + 1);
  }, [count]);
   
  const handleClick = () => {
    increase();
    increase();
    increase();
  };
   
  return (
    <>
      <button onClick={handleClick}>+</button>
      <div>Counter: {count}</div>
    </>
  );
}

这样改完之后,React就能拿到最新的值,当点击按钮时,就会每次增加3。所以需要记住:如果要使用当前状态来计算下一个状态,就要使用函数的式方式来更新状态:

1
setValue(prevValue => prevValue + someResult)

以上就是一文教你如何避免React中常见的8个错误的详细内容,更多关于React常见错误避免的资料请关注脚本之家其它相关文章!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.cn/post/7314500045737328691

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • react-redux的connect示例详解

    react-redux的connect示例详解

    connect()是react-redux中的核心方法之一,它将react组件预redux中的Store真正连接在一起,这篇文章主要介绍了react-redux的connect详解,需要的朋友可以参考下
    2023-01-01
  • 利用CDN加速react webpack打包后的文件详解

    利用CDN加速react webpack打包后的文件详解

    下面小编就为大家分享一篇利用CDN加速react webpack打包后的文件详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • React高阶组件优化文件结构流程详解

    React高阶组件优化文件结构流程详解

    高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧
    2023-01-01
  • react项目使用redux初始化方式

    react项目使用redux初始化方式

    这篇文章主要介绍了react项目使用redux初始化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 如何深入理解React的ref 属性

    如何深入理解React的ref 属性

    关于 Refs ,React 官网讲解的对于新手来说不太友好,还是自己一字一句解读后并以代码验证的方式后真正理解的.
    2021-05-05
  • React实现核心Diff算法的示例代码

    React实现核心Diff算法的示例代码

    这篇文章主要为大家详细介绍了React如何实现Diff算法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-04-04
  • React+高德地图实时获取经纬度,定位地址

    React+高德地图实时获取经纬度,定位地址

    思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可
    2021-06-06
  • 使用react-native-image-viewer实现大图预览

    使用react-native-image-viewer实现大图预览

    这篇文章主要介绍了使用react-native-image-viewer实现大图预览,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • react使用useState修改对象或者数组的值无法改变视图的问题

    react使用useState修改对象或者数组的值无法改变视图的问题

    这篇文章主要介绍了react使用useState修改对象或者数组的值无法改变视图的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍

    React路由渲染方式与withRouter高阶组件及自定义导航组件应用详细介绍

    这篇文章主要介绍了React路由三种渲染方式、withRouter高阶组件、自定义导航组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09

最新评论