JAVASCRIPT：即使存在return语句，也没有从呈现返回任何内容

因此，我有一个

Display（）

函数，它通过API从Google日历中获取事件，并通过

元素将每个事件的名称存储到
事件集。然后，一旦填充了
events
集合，我将通过
for（let item of events）
对集合进行迭代，并创建一个新的

Display
函数调用异步方法，但不返回任何内容。您需要利用
Display
中的状态和效果来呈现返回的数据。但若用户在获取数据之前离开页面，那个么您将遇到错误

此问题的最佳解决方案是利用
redux
和
redux-thunk


注意，下面是未测试的代码
如果您觉得不需要redux，请尝试这种方法

async function fetchItems() {
  const result = await ApiCalendar.listUpcomingEvents(10);
  return result.result.items.map(({summary}) => summary);
}

function Display() {
  const [items, saveItems] = useState([]);
  const isMounted = useRef(true);

  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  useEffect(() => {
    (async () => {
      const items = await fetchItems();
      //Do not update state if component is unmounted
      if (isMounted.current) {
        saveItems(items);
      }
    })();
  }, []);

  return <>{items.map(item => <a key={item}>{item}</a>)}</>
}

异步函数fetchItems（）{
const result=等待ApiCalendar.listUpcomingEvents（10）；
返回result.result.items.map（（{summary}）=>summary）；
}
函数显示（）{
const[items，saveItems]=useState（[]）；
const isMounted=useRef（true）；
useffect（（）=>{
return（）=>{
isMounted.current=假；
};
}, []);
useffect（（）=>{
（异步（）=>{
const items=等待fetchItems（）；
//如果组件已卸载，则不更新状态
如果（isMounted.current）{
保存项目（项目）；
}
})();
}, []);
返回{items.map（item=>{item}）}
}

如果您想要呈现的不仅仅是摘要，您可以这样做

async function fetchItems() {
  const result = await ApiCalendar.listUpcomingEvents(10);
  return result.result.items.map(({summary, somethingElse}) => ({summary, somethingElse}));
  //can be replaced with return [...result.result.items]; to get all props
}

function Display() {

  //... Main logic of Display component is the same, 
  //so I wouldn't duplicate it here

  return <>{items.map(item => <div key={item.summary}>{item.summary} {item.somethingElse}</div>)}</>
}

异步函数fetchItems（）{
const result=等待ApiCalendar.listUpcomingEvents（10）；
返回result.result.items.map（（{summary，somethingElse}）=>（{summary，somethingElse}））；
//可以替换为return[…result.result.items]；以获取所有道具
}
函数显示（）{
//…显示组件的主要逻辑相同，
//所以我不会在这里重复它
返回{items.map（item=>{item.summary}{item.somethingElse}）}
}
您似乎没有在
显示组件上返回任何内容

您不能在组件上返回承诺，因此需要在
useffect
中使用
react hooks
或
component lifecycle
——不，您不需要重复使用就可以实现这一点

function Display() {
    let events = new Set()
    let tabs = [];
    const [items, setItems] = useState([]);

    const getList = async () => {
      const res = await  ApiCalendar.listUpcomingEvents(10);

       setItems(res.items);
    }

    useEffect(async () => {
      getList();
    }, []);

  return items.map(item => <div>{item}</div>);
}

函数显示（）{
让事件=新集合（）
设tabs=[]；
const[items，setItems]=useState（[]）；
const getList=async（）=>{
const res=等待ApiCalendar.listUpcomingEvents（10）；
设置项（res.items）；
}
useffect（异步（）=>{
getList（）；
}, []);
返回items.map（item=>{item}）；
}
return
语句不在
Display
函数中，而是给
then
的回调总是在多行结构上使用大括号，就像您的for of here一样，因为很容易添加一行，就像您的
console.log（item）
，并且从现在开始就中断逻辑，构造的实际主体超出了它的作用域，如标签。在代码段中按（{item}）

。是的，但是：1）您的代码将在每次渲染时获取数据2）如果组件在processoops中卸载，React将显示内存泄漏警告。我忘记添加第二个参数

[]

空数组。它应该只在安装组件后调用API，而不是在每个组件上render@IamLI get error

setItems

未定义。我还想知道，它应该是

{item.summary}

，因为我想要的是事件的名称，而不是整个对象？谢谢。@IamL我也得到了错误

Uncaught类型错误：无法读取null的属性“map”

@HeartKiller我更新了答案-我从未测试过它，只是从Scratch写了一封信。我得到了错误：

Uncaught（in promise）类型错误：无法读取fetchItem未定义的属性“map”

@HeartKiller“未测试”就是说，它可能会抛出错误。此特定项表示

结果

没有

项

。再次查看代码，我认为应该是

result.result.items.map

它现在似乎可以工作，但当我单击页面上的按钮转到下一页时，我得到了以下错误：

func.apply

不是一个带有此警告的函数：它看起来像是您编写了useEffect（异步（）=>…）或返回了一个承诺。相反，在效果中编写异步函数并立即调用它：

useffect（（）=>{async function fetchData（）{//const response=await MyAPI.getData（someId）；/…}fetchData（）；}，[someId]）；//或者[]如果效果不需要道具/状态

@HeartKiller请看更新的答案，这应该可以解决它谢谢你的耐心和知识。我曾试图推翻你的解决方案，但由于我没有足够的声誉，我无法做到，但我非常感谢你的帮助，我接受了你的解决方案。

async function fetchItems() {
  const result = await ApiCalendar.listUpcomingEvents(10);
  return result.result.items.map(({summary, somethingElse}) => ({summary, somethingElse}));
  //can be replaced with return [...result.result.items]; to get all props
}

function Display() {

  //... Main logic of Display component is the same, 
  //so I wouldn't duplicate it here

  return <>{items.map(item => <div key={item.summary}>{item.summary} {item.somethingElse}</div>)}</>
}

function Display() {
    let events = new Set()
    let tabs = [];
    const [items, setItems] = useState([]);

    const getList = async () => {
      const res = await  ApiCalendar.listUpcomingEvents(10);

       setItems(res.items);
    }

    useEffect(async () => {
      getList();
    }, []);

  return items.map(item => <div>{item}</div>);
}