javascript - JAVASCRIPT：即使存在返回语句，渲染也没有返回任何内容

Question

所以我有这个Display()函数，它通过 API 从 Google 日历中获取事件，并将每个事件的名称存储element.summary到events集合中。然后，一旦events集合被填充，我遍历集合 via并使用名称作为文本 via 为集合中的每个事件/项目for (let item of events)创建一个新标签（例如，然后我将每个标签推入一个名为然后最后返回数组。该集合包含三个项目，当 I 时，我在集合中看到正确的项目（“call”、“kist”和“go”）。但是，一旦我进入数组，它只包含一个标签，其值为 null 而它应该包含三个<a><a>{item}</a><a>call<a><a>tabstabseventsconsole.logconsole.logtabs<a><a>标签，因为它遍历events包含三个项目的集合，并且应该<a>为每个项目创建一个标签。另外，我得到了item is not definedline的错误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()数组）并且类中的函数也返回了一个带有相应组件的元素，我得到了错误我是 JavaScript 新手，不知道是什么我做错了。非常感谢您的任何帮助，并在此先感谢您。<a>render()<div>divUncaught Error: Display(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

export default class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sign: ApiCalendar.sign,
        };
    }

    render() {
        const isLoggedIn = this.state.sign;
        let ele;

        if (isLoggedIn) {
            ele = <Display/>;
        } else {
            ele = <Button>'Sign In'</Button>;
        }

        return (
            <div>
                {ele}
            </div>
        );
    }
}

标签： javascriptreactjs

Answer 1

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

您不能在组件上返回承诺，因此您需要在内部useEffect使用react hooksor component lifecycle- 不，您不需要 redux 来实现这一点。

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