Question

我正在构建一个网络应用程序，从阵列中生成两个团队（每个团队3个玩家）。在为每个团队展示多个方法时，我一直在努力采用一般方法。目前，每个团队只从阵列中显示一个团队成员（我试过i ++方法无济于事）。帮助将不胜感激。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
render() {
const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar 
Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];

const firstTeamRandom = myTeam[Math.floor(Math.random() * myTeam.length)];
const secondTeamRandom = myTeam[Math.floor(Math.random() * myTeam.length)];

return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to Extreme Paintball!</h1>
    </header>
    <div>
      <p>{firstTeamRandom}</p>
    </div>
    <div>
      <p>{secondTeamRandom}</p>
    </div>
  </div>
  );
  }
  }

  export default App;

感谢您的帮助。我实施了以下内容并且有效;虽然当我在按钮上应用背景状态更改时，它会再次为所有值执行随机团队成员名称...不知道如何解决这个问题，因为我似乎无法找到触发器......

import React, { Component } from 'react';
import './App.css';

const green = '#39D1B4';
const yellow = '#FFD712';

class App extends Component {
constructor(props){
super(props);
this.state = {color: green};
this.changeColor = this.changeColor.bind(this);
}
changeColor(){
const newColor = this.state.color == green ? yellow : green;
this.setState({ color: newColor });
}

render() {
const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar 
Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain 
Natalie', 'Dipak Iunia', 'Danel Mio'];
const firstTeam = [];
const secondTeam = [];

for (let i = 0; i < 3; i++) {
  const playerIndex = Math.floor(Math.random() * myTeam.length);
  firstTeam.push(myTeam[playerIndex]);
  myTeam.splice(playerIndex, 1);
}

for (let i = 0; i < 3; i++) {
  const playerIndex = Math.floor(Math.random() * myTeam.length);
  secondTeam.push(myTeam[playerIndex]);
  myTeam.splice(playerIndex, 1);
}

return (
  <div className="App">
    <div>
      <h3>First team</h3>
      <div>{firstTeam.map((player, key) => <div key={key}><button style=
{{background: this.state.color}} onClick={this.changeColor}>{player}
</button></div>)}</div>
    </div>
    <div>
      <h3>Second team</h3>
      <ul>{secondTeam.map((player, key) => <li key={key}><button style=
      {{background: this.state.color}} onClick={this.changeColor}>{player}
      </button></li>)}</ul>
    </div>
  </div>
);
}
}

export default App;

Answer 1

这应该可以解决问题：

const myTeam = [
  'Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch',
  'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie',
  'Dipak Iunia', 'Danel Mio'
];

let remainingTeam = myTeam.slice();
let firstTeamRandom = [];
let secondTeamRandom = [];

for ( let i = 0; i < 3; i++ ) {
  let randomPlayer = remainingTeam[Math.floor(Math.random() * remainingTeam.length)];
  remainingTeam = remainingTeam.filter(player => player !== randomPlayer);
  firstTeamRandom.push(randomPlayer);
}

for ( let i = 0; i < 3; i++ ) {
  let randomPlayer = remainingTeam[Math.floor(Math.random() * remainingTeam.length)];
  remainingTeam = remainingTeam.filter(player => player !== randomPlayer);
  secondTeamRandom.push(randomPlayer);
}

Answer 2

此代码正常运行

import React, { Component } from 'react';

class App extends Component {
  render() {
    const myTeam = ['Benzo Walli', 'Rasha Loa', 'Tayshaun Dasmoto', 'Colmar Cumberbatch', 'Femi Billon', 'Ziya Erika', 'Siyabonga Nesta', 'Sylvain Natalie', 'Dipak Iunia', 'Danel Mio'];
    const firstTeam = [];
    const secondTeam = [];

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * myTeam.length);
      firstTeam.push(myTeam[playerIndex]);
      myTeam.splice(playerIndex, 1);
    }

    for (let i = 0; i < 3; i++) {
      const playerIndex = Math.floor(Math.random() * myTeam.length);
      secondTeam.push(myTeam[playerIndex]);
      myTeam.splice(playerIndex, 1);
    }

    return (
      <div className="App">
        <div>
          <h3>First team</h3>
          <ul>{firstTeam.map((player, key) => <li key={key}>{player}</li>)}</ul>
        </div>
        <div>
          <h3>Second team</h3>
          <ul>{secondTeam.map((player, key) => <li key={key}>{player}</li>)}</ul>
        </div>
      </div>
    );
  }
}

export default App;

为两个不同的渲染调用生成多个数组项

2 个答案: