Question

所以我有这个Display()函数，它通过API从Google日历中获取事件，并通过element.summary将每个事件的名称存储到events集中。然后填充events集后，我便通过for (let item of events)遍历该集，并使用名称作为文本，通过<a>为该集中的每个事件/项目创建一个新的<a>{item}</a>标签{1}}（例如<a>call<a>，然后将每个<a>标签推入名为tabs的新数组中，然后最终返回tabs数组。{{1} }集合包含三个项目，当我events时，我在集合中看到正确的项目（“ call”，“ kist”和“ go”）。但是，一旦我console.log {{1 }}数组，它仅包含一个值为{null的console.log标签，而应该包含三个tabs标签，因为它遍历<a>集，该集包含三项，并且应该分别为每个创建一个<a>标签。另外，我得到events行<a>的错误，我无法以某种方式遍历item is not defined集，请参见{{3} }。

for (let item of events)

这是我在与上述函数相同的文件中创建的类，该类基本上在用户未登录其日历时呈现“登录”按钮，或呈现返回的events标签数组如果用户已经登录，则可以使用function Display() { let events = new Set() let tabs = [] ApiCalendar.listUpcomingEvents(10) .then(({result}: any) => { result.items.forEach(element => { console.log(element.summary) events.add(element.summary) } ); console.log(events) for (let item of events) console.log(item) tabs.push(<a>{item}</a>) console.log(tabs) return tabs }); }函数。但是，即使上面的<a>函数确实返回了某些内容（即Display()标签数组）和Display()函数在类内部，还会返回一个<a>元素以及在render()内部的相应组件，我收到错误消息<div>，我是JavaScript新手，不知道自己在做什么错。非常感谢您的帮助，并在此先感谢您。

div

Answer 1

您的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>)}</>
}

如果您要渲染的不仅仅是摘要，则可以这样做

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

Answer 2

似乎您没有在item组件上返回任何内容。

您无法在组件上返回承诺，因此需要使用Display或useEffect在react hooks内实现承诺-而且，您不需要redux即可实现这个。

component lifecycle

JAVASCRIPT：即使存在return语句，也未从渲染返回任何内容

2 个答案:

警告，下方未经测试的代码