使用useffect刷新表

Question

我是新来的反应，我有以下问题：use效应是更新无限次，但我只是希望它更新的数据，当我插入一个新的记录，我将不胜感激，如果有人能纠正我。

这是我的代码：

指数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) => {
    });
};

如果我加上第二个参数useffect（）=

我做错了什么？创建用户是完美的工作，我只是想在同一时间在表

Answer 1

您可以将依赖数组留空，以便它只运行一次。

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

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

空依赖项数组在装载时仅运行一次

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

将值作为依赖项传递.如果依赖项自上次以来已更改，则效果将再次运行。

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

没有依赖性。这在每次渲染后都会被调用。

Answer 2

看起来您只想获取一次数据（在组件加载时）。如果是这样，只需为依赖项使用一个空数组

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

Answer 3

在use效应中，如果没有第二个参数（依赖关系数组），效果将无限期运行。

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

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