次の一意のキーの問題を削除する方法

2020-06-30 reactjs error-handling syntax-error antd

ここでは、react jsのANTテーブルコンポーネントを使用しています。リンクをクリックして、ANTテーブルコンポーネントを使用している関連ページに移動すると、「リスト内の各子に一意の「キー」プロップが必要です。」このエラーは毎回再現されます。次のコードを確認してください。ここに追加するのに欠けているものは何ですか?私のコードを見て、知らせてください。

     <Table dataSource={state.cardsList}>
        <Column
          title="Credit card number"
          dataIndex="cardNumber"
          key="cardNumber"
        />
        <Column
          title="Expiry month"
          dataIndex="expMonth"
          key="expMonth"
        />
        <Column title="Expiry year" dataIndex="expYear" key="expYear" />
        <Column
          title="Action"
          key="action"
          dataIndex="action"
          render={(text, record) => (
            <Space size="middle">
              {/* <a>Invite {record.lastName}</a> */}
              <a onClick={() => removeCard(record)}>Delete</a>
            </Space>
          )}
        />
      </Table>

事前にどうもありがとうございました。

Answers

dataSource一意のkeyプロパティがないようです。

state.cardsList各要素に、 state.cardsListようなkeyプロパティがあることを確認してください。

const dataSource = [
  {
    key: '1',    // unique key property
    name: 'Mike',
    age: 32,
    address: '10 Downing Street',
  },
  {
    key: '2',   // unique key property
    name: 'John',
    age: 42,
    address: '10 Downing Street',
  },
  ...
];

state.cardsList一意のキーがない場合は、マップしてキーを追加するだけです。

<Table dataSource={state.cardsList.map((el, idx) => ({key: idx, ...el}))}>
...

それが役に立てば幸い。

Related