使用 useEffect 刷新表

Posted 2023-02-22

【中文标题】使用 useEffect 刷新表

【英文标题】：refresh table with useEffect

【发布时间】：2020-05-05 07:43:19

【问题描述】：

我是新手，我有以下问题：useEffect 正在更新无限次，但我只想在我插入新记录时更新数据，如果有人能纠正我，我将不胜感激。

这是我的代码：

index.js

import createUser, getUsers from '../actions';

const Home = () => 
    const [data, setData] = useState([]);

useEffect(() => 
    async function fetchData()
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    
    fetchData();
, [setData]);

const handleCreateUser = (user) => 
    createUser(user).then((users) => 
    );
;

如果我设置第二个参数 useEffect(() => , [setData])，它会打破无限循环，但当我插入新寄存器时表格不会更新，我需要使用 F5。

我做错了什么？ 创建用户工作正常，我只想在同一时间加入表格

【问题讨论】：

你的表格组件在哪里？你使用任何 npm 包吗？也为它添加代码。

【参考方案1】：

我遇到了确切的问题。我想使用一个功能组件，我的请求回来后我不得不画一张桌子。如果我使用[] 作为第二个参数，网页将加载一次，因此图表不会更新。当我在依赖项中添加一些东西时，我的页面会无限期地重新加载。我应该提一下，我将我的状态之一作为我用 useState() 钩子定义的依赖项。

为了克服这种情况，我将我的组件变成了基于类的组件。这是因为我不应该通过道具。但这不是解决方案，如果有帮助，我可以分享代码。

【参考方案2】：

您可以将依赖关系数组留空，这样它只会运行一次。

希望这能帮助您更好地理解。

   useEffect(() => 
      doSomething()
    , []) 

空依赖数组只在挂载上运行一次

useEffect(() => 
  doSomething(value)
, [value]) 

将值作为依赖项传递。如果依赖关系自上次以来发生了变化，效果将再次运行。

useEffect(() => 
  doSomething(value)
) 

没有依赖。每次渲染后都会调用它。

【参考方案3】：

您似乎只想获取一次数据（在组件加载时）。如果是这样，just use an empty array 用于您的依赖项

useEffect(() => 
    async function fetchData()
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    
    fetchData();
, []);

【参考方案4】：

在useEffect 中，如果没有第二个参数（依赖项数组），您的效果将无限期运行。

如果您只想在创建新用户时运行效果，您可以创建一个单独的状态，然后将其包含到 useEffect 的依赖项中，例如将其称为 refreshKey。我的建议是：

import createUser, getUsers from '../actions';

const Home = () => 
    const [data, setData] = useState([]);
    const [refreshKey, setRefreshKey] = useState(0);

useEffect(() => 
    async function fetchData()
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    
    fetchData();
, [refreshKey]);

const handleCreateUser = (user) => 
    createUser(user).then((users) => 
      // Refresh the effect by incrementing 1
      setRefreshKey(oldKey => oldKey +1)
    );
;

【讨论】：

@gabrielgraciani 如果您能将我的回答标记为有帮助，我将不胜感激