React 中 useeffect忽略了首次执行

最新推荐文章于 2024-05-20 09:55:08 发布

上官孜然

最新推荐文章于 2024-05-20 09:55:08 发布

阅读量723

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Lynn_yu/article/details/131788193

版权

文章讨论了在React组件中，使用useEffectHook时如何避免忽略首次执行的情况。通过引入useRef来标记初始渲染，确保在输入框未被修改时，于模拟的接口请求后更新状态。

摘要由CSDN通过智能技术生成

useeffect忽略了首次执行

import { useEffect, useRef, useState } from 'react';

function MyComponent() {
  const [inputValue, setInputValue] = useState('');
  const isInitialRender = useRef(true); // 用于标记是否是首次渲染

  useEffect(() => {
    if (isInitialRender.current) {
      isInitialRender.current = false;
      return;
    }

    // 模拟接口请求获取新的数据
    setTimeout(() => {
      const newData = 'New Data';
      // 判断当前输入框是否被用户修改过
      if (!inputValue) {
        setInputValue(newData); // 只在输入框未被修改过时更新值
      }
    }, 1000);
  }, [inputValue]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
}