React Map 组件中出现错误（无法读取未定义的读取 id 的属性）

Question

这是我的代码。我不知道为什么，但错误出现在“FriendList”组件中

我厌倦了盯着并询问聊天gpt，但它不起作用。谢谢。

/* eslint-disable react/no-unescaped-entities */
/* eslint-disable react/prop-types */
import { useState } from "react";

const initialFriends = [
    {
        id: 118836,
        name: "Clark",
        image: "https://i.pravatar.cc/48?u=118836",
        balance: -7,
    },
    {
        id: 933372,
        name: "Sarah",
        image: "https://i.pravatar.cc/48?u=933372",
        balance: 20,
    },
    {
        id: 499476,
        name: "Anthony",
        image: "https://i.pravatar.cc/48?u=499476",
        balance: 0,
    },
];

const App = () => {
    const [showAddFriend, setShowAddFriend] = useState(false);
    const [friends, setFriends] = useState(initialFriends);
    const handleShowAddFriend = () => {
        setShowAddFriend((show) => !show);
    };
    const handleAddFriend = ({ friend }) => {
        setFriends((friends) => [...friends, friend]);
    };

    return (
        <div className="app">
            <div className="sidebar">
                <FriendList friends={friends} />
                {showAddFriend && <FormAddFriend onAddFriend={handleAddFriend} />}
                <Button onClick={handleShowAddFriend}>
                    {showAddFriend ? "Close" : "Add friend"}
                </Button>
            </div>
            <FormSplitBill />
        </div>
    );
};

const Button = ({ children, onClick }) => {
    return (
        <button onClick={onClick} className="button">
            {children}
        </button>
    );
};

const FriendList = ({ friends }) => {
    return (
        <ul>
            {friends.map((friend) => (
                <Friend friend={friend} key={friend.id} />
            ))}
        </ul>
    );
};

const Friend = ({ friend }) => {
    return (
        <li>
            <img src={friend.image} alt={friend.name} />
            <h3>{friend.name}</h3>
            {friend.balance < 0 ? (
                <p className="red">
                    You owe {friend.name} {Math.abs(friend.balance)}$
                </p>
            ) : friend.balance === 0 ? (
                <p>You and {friend.name} are even</p>
            ) : (
                <p className="green">
                    {friend.name} owes you {friend.balance}$
                </p>
            )}
            <Button>Select</Button>
        </li>
    );
};

const FormAddFriend = ({ onAddFriend }) => {
    const [name, setName] = useState("");
    const [image, setImage] = useState("https://i.pravatar.cc/48");

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!name || !image) return;
        const id = crypto.randomUUID();
        const newFriend = {
            id,
            name,
            image: `${image}?=${id}`,
            balance: 0,
        };
        onAddFriend(newFriend);
        setName("");
        setImage("https://i.pravatar.cc/48");
    };

    return (
        <form className="form-add-friend" onSubmit={handleSubmit}>
            <label>Friend name</label>
            <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
            />
            <label>Image URL</label>
            <input
                value={image}
                onChange={(e) => setImage(e.target.value)}
                type="text"
            />
            <Button>Add</Button>
        </form>
    );
};

const FormSplitBill = () => {
    return (
        <form className="form-split-bill">
            <h2>Split a bill with X</h2>
            <label>💲 Bill value</label>
            <input type="text" />
            <label>💵 Your expense</label>
            <input type="text" />
            <label>👨🏿‍🤝‍👨🏾 X's expense</label>
            <input type="text" />
            <label>😅 Who is paying the bill</label>
            <select>
                <option value="user">You</option>
                <option value="friend">X</option>
            </select>
            <Button>Split bill</Button>
        </form>
    );
};

export default App;

我正在学习 Udemy 课程。这是来自控制台的错误消息。 App.jsx:62 未捕获类型错误：无法读取 App.jsx:62:45 处未定义的属性（读取“id”） at Array.map () at FriendList (App.jsx:61:16) console.js:213 组件中出现上述错误：

your text

在 FriendList (http://localhost:5173/src/App.jsx?t=1705498582948:92:23) 在 div 在 div 在应用程序 (http://localhost:5173/src/App.jsx?t =1705498582948:41:45)

Answer 1

这样做好安全防护：

<ul>
   {friends.map((friend) => (
     friend && <Friend friend={friend} key={friend.id} />
   ))}
</ul>

它将检查好友是否已定义。您的朋友对象有时未定义，因此您会收到此错误