React项目求助：实现Available与Alpha团队成员的添加/移除功能

Hey there! Let's get your team selection functionality working properly. The core issues right now are that your team data isn't being persisted across re-renders, and you don't have any click handlers to move members between the Available and Alpha teams. Here's a complete, working version of your component:

import React, { Component } from 'react';
import './App.css';
const green = '#39D1B4';
const yellow = '#FFD712';

class App extends Component {
  constructor(props) {
    super(props);
    // Initialize state with the full list of available members
    this.state = {
      availableTeam: ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'],
      alphaTeam: [],
      omegaTeam: []
    };
  }

  componentDidMount() {
    // Generate Omega Team once when the component mounts
    const { availableTeam } = this.state;
    const availableCopy = [...availableTeam];
    const newOmegaTeam = [];
    
    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * availableCopy.length);
      newOmegaTeam.push(availableCopy[playerIndex]);
      availableCopy.splice(playerIndex, 1);
    }

    // Update state with the new Omega Team and remaining available members
    this.setState({
      omegaTeam: newOmegaTeam,
      availableTeam: availableCopy
    });
  }

  // Move member from Available to Alpha
  addToAlpha = (member) => {
    this.setState(prevState => ({
      availableTeam: prevState.availableTeam.filter(p => p !== member),
      alphaTeam: [...prevState.alphaTeam, member]
    }));
  };

  // Move member from Alpha back to Available
  removeFromAlpha = (member) => {
    this.setState(prevState => ({
      alphaTeam: prevState.alphaTeam.filter(p => p !== member),
      availableTeam: [...prevState.availableTeam, member]
    }));
  };

  render() {
    const { availableTeam, alphaTeam, omegaTeam } = this.state;

    return (
      <div className="App">
        <div>
          <h3>Available Team Members</h3>
          {availableTeam.map((player, key) => (
            <div key={key}>
              <button onClick={() => this.addToAlpha(player)}>{player}</button>
            </div>
          ))}
        </div>
        <div>
          <h3>Alpha Team Members</h3>
          {alphaTeam.map((player, key) => (
            <div key={key}>
              <button onClick={() => this.removeFromAlpha(player)}>{player}</button>
            </div>
          ))}
        </div>
        <div>
          <h3>Omega Team Members</h3>
          {omegaTeam.map((player, key) => (
            <div key={key}>
              <button>{player}</button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default App;

Key Improvements Breakdown #

• State Management: We moved all team arrays into the component's state using this.state, which ensures the data persists across component re-renders.
• Omega Team Generation: The random Omega team is now created once when the component first mounts (componentDidMount()) instead of every render. We also work with a copy of the available members array to avoid mutating the original data directly.
• Transfer Functions:
  • addToAlpha: Filters the selected member out of the available list and adds it to the Alpha team.
  • removeFromAlpha: Does the reverse—removes the member from Alpha and adds it back to the available list.
• Immutable Updates: We use the spread operator ([...array]) and filter() to create new array copies when updating state, which is a React best practice to trigger proper re-renders.

内容的提问来源于stack exchange，提问作者Ruan Petersen