Reactjs 如何在将新项目发布到我的数据库后刷新列表？

我正在尝试构建一个react本机应用程序，它使用AWSAPI网关/lambda和dynamodb作为后端。我有一个扁平列表，通过调用从数据库检索所有项目来填充它。我有一个effect钩子，我正在使用它在组件挂载时获取数据。当/如果我的post请求成功时，如何运行相同的效果

这是我的效果挂钩，我只运行了一次，就像组件安装一样

useEffect(() => {
    const fetchData = async () => {
      const resp = await fetch('MY_AWS_URL')
      const data = await resp.json()
      const exp = data.Items 
      setExp(exp);   //SET THE STATE VARIABLE WITH THE DATA
      setLoading(false); //STOP DISPLAYING DEFAULT SPINNER AND SHOW DATA
    }
    fetchData();

  }, []);   

---

我有一个表格，可以将新数据发布到数据库中。如果POST请求成功，如何自动刷新我的组件以显示最新数据？

如果使用react导航，由于组件未卸载，您的componentDidMount（useEffect）只会触发一次。 因此，我认为您正在从createItem屏幕重定向到showItems屏幕 您应该使用focus listener并在屏幕聚焦时调用后端（基本上这意味着当您在该屏幕中时）

import*as React from'React'；
从“react native”导入{View}；
函数项屏幕（{navigation}）{
React.useffect（（）=>{
const unsubscribe=navigation.addListener（'focus'，（）=>{
//屏幕聚焦
//采取行动
const fetchData=async（）=>{
const resp=wait fetch（'MY_AWS_URL'））
const data=await resp.json（）
const exp=data.Items
setExp（exp）；//使用数据设置状态变量
setLoading（false）；//停止显示默认微调器并显示数据
}
fetchData（）；
});
//返回要取消订阅事件的函数，以便在卸载时将其删除
退订；
}，[导航]；
返回；
}

尝试将列表置于状态，在调用post请求后，使用最新项目更新状态（项目列表），以便react将更新组件 这里我给你一个axios库的例子，如果你不使用它，这不是问题，只要在成功执行post请求后更新列表就可以了

class您的类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
列表：[]，//列表在数据库中包含相同的数据
};
}
常数更新=（）=>{
axios（）.post（）.then（setState（{list:nextListedwiththeneItem}））.catch（）
}
render（）{
}

这不是很有帮助，也许可以拿他的代码举例说明你想表达什么？

import * as React from 'react';
import { View } from 'react-native';

function ItemScreen({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // The screen is focused
      // Call any action
    const fetchData = async () => {
      const resp = await fetch('MY_AWS_URL')
      const data = await resp.json()
      const exp = data.Items 
      setExp(exp);   //SET THE STATE VARIABLE WITH THE DATA
      setLoading(false); //STOP DISPLAYING DEFAULT SPINNER AND SHOW DATA
    }
    fetchData();
    });

    // Return the function to unsubscribe from the event so it gets removed on unmount
    return unsubscribe;
  }, [navigation]);

  return <View />;
}