Reactjs React-TypeError:无法读取未定义的属性“customId”

如果运行以下组件，则会出现此错误：

TypeError:无法读取未定义的属性“customId”

我做错了什么

import React, { useState, useEffect } from 'react';
import { db } from '../firebase';

const DocList = ({ card }) => {
  const [cards, setCards] = useState([]);
  const [customId, setCustomId] = useState(card.customId);
  const [originalText, setOriginalText] = useState(card.originalText);

  useEffect(() => {
    const fetchData = () => {
      const data = db.collection('FlashCards').orderBy('customId').get();
      setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };
    fetchData();
  }, []);

  return (
      <ul className='list'>
        {cards.map((card) => (
          <li key={card.id} className='list__item' data-id={card.id}>
            <input
              type='text'
              value={customId}
              onChange={(e) => {
                setCustomId(Number(e.target.value));
              }}
            />
            <div className='list__textarea-wrapper'>
              <textarea
                value={originalText}
                onChange={(e) => {
                  setOriginalText(e.target.value);
                }}
              />
            </div>
          </li>
        ))}
      </ul>
  );
};

export default DocList;

---

无法访问卡对象的customerId

const [customId, setCustomId] = useState(card?.customId);
const [originalText, setOriginalText] = useState(card?.originalText);

---

你能试试这个吗？

在第一次渲染时，这不起作用：

const DocList = ({ card }) => {
...

---

您正试图从道具对象中解构卡片，而道具对象显然不是来自父组件。在组件初始化期间，检查要在其中渲染的树

const [cards, setCards] = useState([]);

卡片是一个没有customId属性的数组

const [customId, setCustomId] = useState(card.customId);// so,this will give an error.

在下面的代码中，setCards设置为一个object数组，而不是object数组

setCards(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));

---

您可能正在将未定义的作为卡片道具传递给文档列表。请您添加它是卡片阵列，另一个是作为道具的卡片对象，它们是不同的。