标签: use-effect

我正在开发我的第一个 React 项目，但遇到以下问题。我希望我的代码如何工作：

• 我将项目添加到可通过上下文访问的数组中（context.items）
• 我想在组件中运行 useEffect 函数，只要值发生变化，就会显示 context.items

我尝试过的：

1. 将上下文（ 和context）context.items列为 useEffect 中的依赖项

• 这导致组件在值更改时不更新

2. 列出context.items.length

• 然而，这导致组件在数组长度发生变化时更新，而不是在单个项目的值发生变化时更新。

3. 将上下文包装在Object.values(context)

• 结果正是我想要的，除了 React 现在抱怨*传递给 useEffect 的最后一个参数改变了渲染之间的大小。该数组的顺序和大小必须保持不变。*

您知道有什么方法可以修复此 React 警告或在上下文值更改时运行 useEffect 的不同方法吗？

好吧，不想添加代码，希望这对我来说是一些简单的错误，但即使有一些答案，我仍然无法解决这个问题，所以在这里，减少了希望简化。

上下文组件：

const NewOrder = createContext({
  orderItems: [{
    itemId: "",
    name: "",
    amount: 0,
    more:[""]
  }],
  addOrderItem: (newOItem: OrderItem) => {},
  removeOrderItem: (oItemId: string) => {},
  removeAllOrderItems: () => {},
});

export const NewOrderProvider: React.FC = (props) => {
  // state
  const [orderList, setOrderList] = useState<OrderItem[]>([]);

  const …

在 useEffect 上收到错误“ReferenceError：无法在初始化之前访问“todos””

function App() {
    //use effect
    useEffect(() =>{
        filterHandler();
    },[todos, status]); 


    //input text
    const [inputText,setInputText]=useState('');

    //todo list
    const[todos , setTodos] = useState([]);
    return (
        <div className="App">
            <header>
            <h1>Todo List</h1>
            </header>
            <Form 
                todos={todos} 
            />
        </div>
    )
}

我有一个 React/Redux 类组件，我正在将其转换为功能组件。

以前，它有一个componentDidMount回调，为从应用程序中其他地方调度的自定义事件添加事件侦听器。这正在被替换useEffect。事件侦听器在触发时调用该组件中其他位置的方法。

此方法执行的操作取决于从选择器检索的值。最初，我传递了useEffect一个空的依赖项数组，因此它只会在挂载上添加事件侦听器。然而，显然这会导致选择器值周围的闭包过时。一个可行的解决方案是将选择器作为依赖项 \xe2\x80\x93 传递给它，但是，这会导致每次选择器的值更改时都会删除/重新添加侦听器，这不太好。

我正在尝试考虑一种解决方案，该解决方案仅添加一次事件侦听器，同时允许被调用的方法访问选择器的当前值。

示例代码：

const currentValue = useSelector(state => getValue(state));\n\nuseEffect(() => {\n  document.addEventListener('my.custom.event', handleEvent);\n\n  return(() => document.removeEventListener('my.custom.event', handleEvent));\n}, []);\n\nconst handleEvent = () => {\n  console.log(currentValue)\n}\n

事实上，这会创建一个陈旧的闭包currentValue，以便在事件触发时，记录的值不一定是最新的。

更改[]为[currentValue]inuseEffect会产生预期的行为，但会在每次更改 时删除/重新添加事件侦听器currentValue。

由于这不是组件的状态值，因此无法选择使用回调（例如console.log(currentValue => console.log(currentValue))访问最新值）。我还尝试使用 usinguseRef来保留该值，但我相信每次选择器的值发生变化时我都需要某种方法来更新 ref 值，这并不是一个解决方案。

在实际组件中， 的值currentValue在 Redux 中被其他组件修改，因此将其更改为状态值也不太可行。

我在想：

\n
• 是否有办法在被调用的方法中刷新选择器的值；
\n …

在我的 React Typescript 应用程序中，我使用 a在发生变化时useEffect进行调用。eventTrackerwallet.address

const wallet = useWallet();
const eventTracker = useAnalyticsEventTracker();

useEffect(() => {
  if (wallet?.address) {
    eventTracker('Wallet', 'Connect', wallet?.address);
    console.log(wallet.address);
  }
}, [wallet]);

我的 IDE 和浏览器控制台都发出警告

React Hook useEffect 缺少依赖项：“eventTracker”。包含它或删除依赖项 array.eslintreact-hooks/exhaustive-deps

我不确定我的方法或 linter 建议是否正确，因为添加eventTracker到依赖项数组会导致传递到的函数useEffect在应用程序启动时运行 10 次，而不是一次。

人们建议在这里做什么？

这是钩子：

import ReactGA from 'react-ga';

const useAnalyticsEventTracker = () => {
  const eventTracker = (
    category: string,
    action: string,
    label: string,
  ) => {
    ReactGA.event({ category, action, label });
  };

  return eventTracker; …

菜鸟在这里反应一下。

我正在尝试使用 Context、useState、useEffect 和 sessionStorage 的组合来构建一个在页面刷新时持续运行的功能全局数据存储。

当用户登录应用程序时，我会获取 API，然后setUserData当我收到响应时。

这部分效果很好，但我意识到，如果用户“刷新”他们的页面，应用程序会将userDataconst 重置为null（并且页面因此崩溃）。

我研究了一些关于使用 useEffect 和 sessionStorage 的组合来有效替换userDatasessionStorage 中当前内容的文章和视频，这似乎是处理页面刷新的明智方法。[来源： React Persist State to LocalStorage with useEffect by Ben Awad]

但是，我似乎无法让 useEffect 发挥作用。由于某种原因 useEffect 只在/路线上触发而不是在/dashboard路线上？

我希望因为 useEffect 位于 App.js 中，所以每次刷新任何路由时它都会运行（从而从 sessionStorage 检索最新数据）。

我在 App.js 中添加了一些控制台日志记录，以了解何时触发事件，并在下面包含这些日志。

我对 useEffect 的理解不正确吗？为什么它只在刷新路由时触发，而不是在刷新/页面时触发？/dashboard

应用程序.js

import { useState, createContext, useEffect } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import '../css/app.css'; …

希望使用带有 useEffect 的 React hook 表单来实时获取更改（当用户填写表单时），是否有一个原因导致 useEffect 在这里不被触发，如果是这样，有没有办法在表单数据时触发它变化？这里的示例来自https://remotestack.io/react-hook-form-set-update-form-values-with-useeffect-hook/

import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";

export default function SimpleForm() {
  const { register, handleSubmit, reset, formState } = useForm();

  const [student, initStudent] = useState(null);

  useEffect(() => {
    setTimeout(
      () =>
        initStudent({
          name: "Little Johnny",
          email: "lil@johnny.com",
          grade: "3rd",
        }),
      1200
    );
  }, []);

  useEffect(() => {
    console.log("updating.,..");

    reset(student);
  }, [reset, student]);

  function onFormSubmit(dataRes) {
    console.log(dataRes);
    return false;
  }

  return (
    <div>
      <h2 …

在这个例子中 GET 请求取消很好：

export default function Post (props) {
  const _cancelToken = axios.CancelToken.source()

  useEffect(() => {
    const _loadAsyncData = async () => {
      await axios.get('/post'), { cancelToken: _cancelToken.token })
    }

    _loadAsyncData()

    return () => {
      _cancelToken.cancel()
    }
  }, [])
  return ()
}

但是当我需要通过 POST 请求保存表单时，我的代码如下所示：

export default function Form (props) {
  const _cancelToken = axios.CancelToken.source()
  const _zz = { qq: 'QQ' }

  const handleCreate = async e => {
    e.preventDefault()

    _zz.qq = 'ZZ'

    await axios.post('/form'), {}, { cancelToken: _cancelToken.token }) …

我的 React 代码中有一个功能组件，如下所示：

const Compo = ({funcA}) => {
   useEffect(() => {
      window.addEventListener('x', funcB, false);

      return () => {
       window.removeEventListener('x', funcB, false); 
      }
   });

   const funcB = () => {funcA()};      

   return (
      <button
        onClick={() => funcA()}
      />
   );
};

Compo.propTypes = {
   funcA: func.isRequired
}

export default Compo;

我需要测试上述功能组件，以确保如 useEffect() 挂钩中所述添加和删除事件侦听器。

这是我的测试文件的样子 -

const addEventSpy = jest.spyOn(window, 'addEventListener');
const removeEventSpy = jest.spyOn(window, 'removeEventListener');

let props = mockProps = {funcA: jest.fn()};
const wrapper = mount(<Compo {...props} />);

const callBack = wrapper.instance().funcB; …

const [dailyData, setDailyData] = useState([]);
 useEffect(async () => {
    const fetchData =  await fetchDailyData();  // fetchDailyData() is calling Api 
    setDailyData(fetchData); 

    console.log(fetchData); //fetchData print the value but dailyData not updating


  },[]);

显示 destroy 不是函数并且 func.apply 不是函数

我是 React JS 的新手。我正在 React 中进行 CRUD 操作。一切都很好，但是当我从列表中删除项目时，我必须刷新浏览器来更新列表。我该如何解决这个问题？

import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { Segment, Item, Container, Card, Icon, Button } from 'semantic-ui-react';
import { IEmployee } from '../../src/Model/activity'
import { Link, RouteComponentProps } from 'react-router-dom';


interface DetailParams {
    id: string;
}


const EmployeeList : React.FC<RouteComponentProps<DetailParams>> = ({ match, history }) => {

    const [employees, setEmployees] = useState<IEmployee[]>([])

    useEffect(() => {
        axios.get('https://localhost:44353/Employee/GetEmployeeList')
            .then((response) => {
                setEmployees(response.data)
            })
    }, [])


    const deleteEmployee =(id: …