javascript renderItems没有项[重复]

wwtsj6pe  于 2023-01-29  发布在  Java
关注(0)|答案(1)|浏览(69)
    • 此问题在此处已有答案**:

When should I use a return statement in ES6 arrow functions(6个答案)
11小时前关门了。
我想创建一个函数renderItems,这样就可以将其插入到return中,但它不起作用。如果将此函数插入到return中,则在控制台中显示未定义。所有函数都起作用,但我不想这样做。

import React, { useState } from "react";
import { useEffect } from "react";
import PostService from "../../API/PostService";
import Loading from "../loading/Loading";
import "./ItemList.css";

export default function ItemList() {
    const [peopleList, setPeopleList] = useState();
    const [items, setItems] = useState();

    const postService = new PostService();

    useEffect(() => {
        postService.getAllPeople().then((peopleList) => {
            setPeopleList(peopleList);
        });
    }, []);

    const renderItems = (arr) => {
        arr.map(({ id, name }) => {
            return (
                <li className="list-group-item" key={id}>
                    {name}
                </li>
            );
        });
    };

    return (
        <div>
            {!peopleList ? (
                <Loading />
            ) : (
                <ul className="item-list list-group">
                    {console.log(renderItems(peopleList))}
                </ul>
            )}
        </div>
    );
}
ifmq2ha2

ifmq2ha21#

你只需要从renderItems返回

const renderItems = (arr) => {
       return arr.map(({ id, name }) => {
            return (
                <li className="list-group-item" key={id}>
                    {name}
                </li>
            );
        });
    };

相关问题