在map（）中反应道具不匹配

所以我有一个奇怪的问题，在其中一个组件中，我正在teams数组上运行地图以渲染一些JSX。在UI中，有一个EditTeamNameAlert组件，我将其传递给该组件，如下面的示例代码所示。 问题是，例如，我的“团队”数组中有两个元素

const teams = [{ID: 1, name: 'team1'}, {ID: 2, name: 'team2'}]

那么两个EditTeamNameAlert组件都将接收对teams数组中最后一个元素的支持。 我什至尝试过使用带有索引和传递索引的map，但这也不起作用。我有什么想念的吗？

const Main = (
  <div>
    <div className={styles.header}>
      <h1>Manage teams</h1>
      <button className={styles.newTeamButton}>Create new team</button>
    </div>
    <PendingTeamInvite teamName=".... />
    {teams.map((team, index) => {
// Prints two times
      console.log('team id', team.ID)
      return (
        <Card>
          <div className={styles.teamHeader}>
// Sets the name properly
            <div className={styles.teamName}>{team.name}</div>
            <EditTeamNameAlert
              key={teams[index].ID}
// sends the last id of team and sets the name of the last name in team array
              teamID={teams[index].ID}
              teamName={team.name}
              open={editNameAlertOpen}
              setAlertOpen={setEditNameAlertOpen}
            />
            <button
              className={['gradientButton', styles.inviteButton].join(' ')}
            >
              Invite Teammates
            </button>
          </div>
        </Card>
      )
    })}
  </div>
)

这也是EditTeamNameAlert的代码

import React from 'react'

import Card from '../Card'
import { Modal } from '../Helper' // Modal is from Senamtic UI react
import { useFormFields } from '../../../utilities/formHooks'

interface Props {
  children?: React.ReactNode
  teamID?: string
  teamName: string
  open: boolean
  setAlertOpen: (open: boolean) => void
}

const EditTeamNameAlert: React.FC<Props> = (props) => {
  const [fields, handleFieldChange] = useFormFields<{ teamName: string }>({
    teamName: props.teamName,
  })

  return (
    <div>
      <Modal
        basic
        trigger={
          <button
            onClick={() => props.setAlertOpen(true)}
            className='transparentButton'
          >
            Edit Name
          </button>
        }
        closeIcon
        size='tiny'
        open={props.open}
        onClose={() => props.setAlertOpen(false)}
      >
        <Card>
          <h3>Change Team Name</h3>
          <p>
            Some text warning user that this will change the team name for all
            users
          </p>
          <div>
            <label> Team name</label> <br />
            <input
              name='teamName'
              type='string'
              placeholder='Team name'
              value={fields.teamName}
              onChange={handleFieldChange}
            />
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <button
                className='transparentButton'
                onClick={() => props.setAlertOpen(false)}
              >
                Cancel
              </button>
              <button
                className='gradientButton'
                onClick={() =>
                  console.log('renamed', props.teamID, props.teamName)
                }
              >
                {' '}
                Save
              </button>
            </div>
          </div>
        </Card>
      </Modal>
    </div>
  )
}

export default EditTeamNameAlert

我什至尝试将整个团队对象传递到EditTeamNameAlert中，但这也不起作用。