我对javascript和react有点陌生。我在做一个个人项目，我正在尝试构建一个用户可以添加和删除自定义播放器配置的功能。目前，似乎最好的方法是根据需要添加和删除组件。
这就是我此刻所拥有的：

import React, { Component, useState } from 'react';

import Button from '@material-ui/core/Button'
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import DeleteIcon from '@material-ui/icons/Delete'

function Stats({ allStats, editedStats, statPlayerKey, statKey }) {

  const removeStats = () => {
    const filteredStats = allStats.filter((stat) => stat.statKey !== statKey);
    editedStats(filteredStats);
  }

  return (
    <Grid containter>
      <Button onClick={removeStats}>
        <DeleteIcon />
      </Button>
      <Grid item>
        {statPlayerKey} {statKey}
      </Grid>
    </Grid>
  )
}

function Player({ allPlayers, editedPlayers, playerKey, name }) {

  const [stats, setStats] = useState([])

  const handleRemove = () => {
    const filteredPlayers = allPlayers.filter((player) => player.playerKey !== playerKey);
    editedPlayers(filteredPlayers);
  };

  const statsList = stats.map(({statKey, statPlayerKey}) => (
    <Container>
      <Stats 
        allStats={stats}
        statKey={statKey}
        statPlayerKey={statPlayerKey}
        editedStats={setStats}
      />
    </Container>
  ))

  const addStat = () => {
    setStats([...stats, {statPlayerKey: playerKey, statKey: uuid()}])
  }

  return (
    <Grid container>
      <Button onClick={handleRemove}>
        <DeleteIcon />
      </Button>
      <Grid item>
        {playerKey} {name}
      </Grid>
      <Grid item>
        {statsList}
      </Grid>
      <Button onClick={() => addStat()}>
        Add Stat
      </Button>
    </Grid>
  );
};

function TestApp() {
  const [players, setPlayers] = useState([
    {
      playerKey: uuid(),
      name: "Mario"
    },
    {
      playerKey: uuid(),
      name: "Luigi"
    },
    {
      playerKey: uuid(),
      name: "Toad"
    }
  ]);

  const addPlayer = () => {
    setPlayers([...players, {
      playerKey: uuid(),
      name: 'Bowser'
    }])
  }

  const playersList = players.map(({ playerKey, name }) => (
    <Container>
      <Player
        allPlayers={players}
        editedPlayers={setPlayers}
        playerKey={playerKey}
        name={name}
      />
    </Container>
  ));

  return (
    <div className="App">
      <h1>Team Members ({players.length})</h1>
      <Container>{playersList}</Container>
      <Button onClick={addPlayer}>ADD</Button>
    </div>
  );
}

export default TestApp;

边注-我正在使用uuid的时刻来跟踪发生了什么。不知道我是否应该尝试调用这些在删除函数或没有。对不起，目前缺乏前端设计，计划使用材料ui，但我正在等待设计其余的，直到我可以得到的功能工作的预期。
我做错了什么？添加组件很容易，但是删除功能有缺陷。如果你添加一个属性组件到一个玩家组件，然后删除那个玩家组件，它会把属性组件传递给列表中的下一个玩家。我希望删除玩家按钮可以删除属性组件我还想在stat组件中添加组件，所以我想确保尽可能高效地执行“组件中的组件”方法。