标签: use-effect

这是我在 React js 中的代码的一部分：

export default function Registration() {
    const [email, setEmail] = useState(null);
    const [password, setPassword] = useState(null);
    const [passwordRepeat, setPasswordRepeat] = useState(null);
    const [isFieldsOK, setFieldsOK] = useState(false);

    useEffect(() => {
        if (checkFieldsOK()) {
            setFieldsOK(true);
        } else {
            setFieldsOK(false);
        }
    }, [checkFieldsOK])

    const checkFieldsOK = () => {
        return (isEmail(email) && isValidPassword(password) && passwordRepeat === password);
    }
}

我有 isFieldsOK 状态，它告诉我我的字段是否有效，并且我希望它“侦听”注册功能中的每个更改。运行此命令后，我收到此警告：

The 'checkFieldsOK' function makes the dependencies of useEffect Hook (at line 34) change on every render. Move it …

这是一个 React 风格的问题。

TL;DR从setReact 的useState. useEffect如果该函数“更改”了每次渲染，那么在效果仅运行一次的情况下，在 中使用它的最佳方法是什么？

说明我们有一个 useEffect 需要运行一次（它获取 Firebase 数据），然后将该数据设置为应用程序状态。

这是一个简化的示例。我们正在使用Little-state-machine，它updateProfileData是更新 JSON 状态的“配置文件”部分的操作。

const MyComponent = () => {
    const { actions, state } = useStateMachine({updateProfileData, updateLoginData});
    useEffect(() => {
        const get_data_async = () => {
            const response = await get_firebase_data();
            actions.updateProfileData( {user: response.user} );
        };
        get_data_async();
    }, []);

    return (
        <p>Hello, world!</p>
    );
}

然而，ESLint 不喜欢这样： React Hook useEffect has a missing dependency: 'actions'. Either include …

AFAIK，在 React 函数组件中，必须使用useEffect如下componentWillUnmount功能：

useEffect(()=>{
  return console.log("component unmounting");
},[])

我正在制作一个表单页面，并希望在用户退出页面时提交进度。所以我正在考虑在清理过程中提交。

但是，如果我不将formData状态放入依赖项数组中，则状态将在清理过程中过时。
如果我确实formData将其放入依赖项数组中，则每次formData.

如何保持状态新鲜，但仅在“真正卸载”中运行清理？

const [formData, setFormData] = useState({
  input1: 'input1 default',
  input2: 'input2 default',
}); // track the form data


useEffect(()=>{
  return () => {
    axios.post(myFormSubmitURL, formData);
  }
}, []); // this will submit the stale data

useEffect(()=>{
  return () => {
    axios.post(myFormSubmitURL, formData);
  }
}, [formData]); // this will submit the data every time it changes

我想在获取数据后执行一些副作用，例如 setState 和更新上下文。但是，当数据在缓存中时，onSuccess 不会执行。另外 useEffect 不起作用，因为如果数据被缓存，它不会从未定义的数据更改为真实数据。因此它也不会被触发。这样做的最佳方法是什么？谢谢

伙计们，我一直在开发我的登陆和仪表板页面。

所以页面的工作流程是这样的：用户进入登陆页面，他可以在其中选择插入表单位置，或按按钮接收所有位置。现在，在后端，我创建了两个 API，第一个用于获取所有位置，第二个是我添加的:location位置req.body.param，然后根据该参数过滤位置。邮递员一切正常。

现在因为我有两种用户获取位置的方法（全部或他想要的一些），我认为我useEffect在 if 语句中放置了两个 s ，如下所示：

const filter = props.location.data;
if (filter) {
    useEffect(() => {
      const fetchFiltered = async () => {
        const res = await ArticleService.filterByName(filter);
        setContent(res.data);
      };

      fetchFiltered();
    }, []);
  } else {
    useEffect(() => {
      const fetchPosts = async () => {
        const res = await ArticleService.articles();
        setContent(res.data);
      };

      fetchPosts();
    }, []);
  }

所以我背后的逻辑是，如果有filter内部的props.locationexecute me useEffect，它从谁那里获取数据ArticleService，然后在api url内发送过滤器。如果没有，filter只需检索所有数据，并将Content 设置为res.data …

我在从useEffect获取clientWidth时遇到问题。

import {Suspense, lazy} from 'react';

const UsersContainer = lazy (() => import ('./ users / users-container'));

const Index = (props) => {
    return (
        <Suspense fallback = {<div id = {'loading'} />}>
            <UsersContainer />
        </Suspense>
    )
}

export default Index;

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

import '../common.scss';

const DataTooltip = ({title, ... props}) => {
    let ref = useRef ();

    useEffect (() => {
        if (ref.current.scrollWidth> ref.current.clientWidth) …