Question

我是新来的反应者，但我遇到以下问题：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时表不会更新。

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

Answer 1

在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)
    });
};

Answer 2

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

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

Answer 3

您可以将依赖项数组保留为空白，以便仅运行一次。

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

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

空依赖项数组只能在Mount上运行一次

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

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

useEffect(() => {
  doSomething(value)
})

无依赖性。每次渲染后都会调用它。

Answer 4

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

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

使用useEffect刷新表

4 个答案: