reactjs - 使用 useEffect 刷新表

Question

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

这是我的代码:

索引.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)
    });
};