“警告：在向列表中添加新元素时，列表中的每个子项都应具有唯一的“键”属性

问题描述

我正在使用 React、Express (axios) 和 MongoDB 开发项目列表。

列表数组的项从 MongoDB 中检索，显示在组件中，用户可以添加新项（并将它们保存在 MongoDB 中）。

问题是显示 Warning: Each child in a list should have a unique "key" prop" 是因为使用 id: Math.random() 属性将新元素添加到列表中（尽管这些 id 未提交给数据库）

App.tsx（此处使用 MongoDB 生成的 ID 获取项目列表）

export default function App() {
    const [ExpenseAndamountList,setExpenseAndamountList] = useState<
      Array<{
        id: number,expenseTitle: string,expenseAmount: string,}>
    >([]);


 useEffect(() => {
    const expensesListResp = async () => {
      await axios.get('http://localhost:4000/app/expenseslist')
      .then(
        response => setExpenseAndamountList(response.data && response.data.length > 0 ? response.data : []));
    }
    expensesListResp();
  },[]);

    return (
      <div className="App">
        <ExpenseAmountInputContainer 
          expenseAndamountList={ExpenseAndamountList}
          setExpenseAndamountList={setExpenseAndamountList}
          setTotalExpensesAmount={setTotalExpensesAmount}
          totalExpenses={TotalExpensesAmount}
        />

        <DynamicList 
          expenseAndamountList={ExpenseAndamountList} 
          currencySymbol={Currency}
          setExpenseAndamountList={setExpenseAndamountList}
        />
      </div>
    );
}

ExpenseAmountInputContainer.tsx（此处将项目发布到没有任何 id 的 MongoDB 列表）

interface Props {
    expenseAndamountList: Array<ExpenseAndamountObject>;
    setExpenseAndamountList: (value: Array<ExpenseAndamountObject>) => void; 
}

const ExpenseAmountInputContainer: React.FC<Props> = (
        {
            expenseAndamountList,setExpenseAndamountList,}: Props
    ) => {
    
    const [Expense,setExpense] = useState<string>('');
    const [Amount,setAmount] = useState<string>('');

    const AddItemToList = () => {
        if (Expense !== '' && Amount !== '' && Number(Amount) > 0) {

            axios.post('http://localhost:4000/app/expenseslist',{
                expenseTitle: Expense,expenseAmount: Amount
            });
            
            setExpense("");
            setAmount("");

            const expensesListResp = async () => {
                await axios.get('http://localhost:4000/app/expenseslist')
                .then(
                response => setExpenseAndamountList(response.data && response.data.length > 0 ? response.data : []));
            }
            expensesListResp();
    }

    return (
        <div>
            <InputItem 
                onChange={setExpense} 
                onBlur={setExpense} 
                title="Expense" 
                type="text" 
                placeholder="Item title" 
                value={Expense}
            />
            <InputItem 
                onChange={setAmount}  
                onBlur={setAmount}  
                title="Amount" 
                type="number" 
                placeholder="Expense cost" 
                value={Amount}
            />
            <AddButton 
                onClick={AddItemToList} 
                content="Add expense"

            />
        </div>
    );
};

export default ExpenseAmountInputContainer;

ExpenseAndamountObject.tsx（ExpenseAmountInputContainer.tsx 中使用的接口）

export interface ExpenseAndamountObject {
    id: number,}

DynamicList.tsx

import { ExpenseAndamountObject } from '../ExpenseAndamountObject';
  interface ListItemsArray {
    expenseAndamountList: Array<ExpenseAndamountObject>;
    currencySymbol: string;
    setExpenseAndamountList: (value: Array<ExpenseAndamountObject>) => void;
  }

  const DynamicList: React.FC<ListItemsArray> = (
    {
      expenseAndamountList,currencySymbol,setExpenseAndamountList
    }: ListItemsArray) => {

    return (
        <>
            <List>
                {expenseAndamountList.map(item => (
                  <ExpensesListItem
                    expenseTitle={item.expenseTitle} 
                    expenseAmount={item.expenseAmount}
                    currencySymbol={currencySymbol}
                    item={item}
                    items={expenseAndamountList}
                    setExpenseAndamountList={setExpenseAndamountList}
                  />
                ))} 
            </List>
        </>
      );
  }
  
export default DynamicList;

如何解决问题？

解决方法

渲染列表时需要传递属性 key。

import { ExpenseAndAmountObject } from '../ExpenseAndAmountObject';
  interface ListItemsArray {
    expenseAndAmountList: Array<ExpenseAndAmountObject>;
    currencySymbol: string;
    setExpenseAndAmountList: (value: Array<ExpenseAndAmountObject>) => void;
  }

  const DynamicList: React.FC<ListItemsArray> = (
    {
      expenseAndAmountList,currencySymbol,setExpenseAndAmountList
    }: ListItemsArray) => {

    return (
        <>
            <List>
                {expenseAndAmountList.map(item => (
                  <ExpensesListItem

                    key={} // <-----  SOME UNIQUE ID HERE!!!!!!!!

                    expenseTitle={item.expenseTitle} 
                    expenseAmount={item.expenseAmount}
                    currencySymbol={currencySymbol}
                    item={item}
                    items={expenseAndAmountList}
                    setExpenseAndAmountList={setExpenseAndAmountList}
                  />
                ))} 
            </List>
        </>
      );
  }
  
export default DynamicList;

请参阅解释此行为的文档https://reactjs.org/docs/lists-and-keys.html#keys