Question

我有我的阵列，你可以添加一个＆＃34;播放器＆＃34;对它，它更新就好了。我还有玩家总数，它们会查看数组并给出总和。它可以工作，但它不会考虑新项目。

我知道我需要传递数组（玩家）的新更新状态，但我只是坚持如何做到这一点。

我提供了我的代码剪辑，如下所示

阵列

    const players = [
  {
    name: 'Jabba',
    score: 10,
    id: 11
  },
  {
    name: 'Han',
    id: 1
  },

{
    name: 'Luke',
    id: 2
  },

要添加到数组的功能

  handleChange = e => {
    this.setState({
      newPlayerName: e.target.value
    });
  };

  handleAddPlayer = e => {
    this.setState(prevState => ({
      players: [
        ...prevState.players,
        {
          name: this.state.newPlayerName,
          id: getRandomInt(20, 155)
        }
      ]
    }));
  };

我的州

this.state = {
  id: players.id,
  totalScore: 0,
  totalPlayers: players,
  countInfo: [],
  evilName: '',
  color: '#6E68C5',
  scoreColor: '#74D8FF',
  fontAwe: 'score-icon',
  incrementcolor: '',
  scoreNameColor: 'white',
  glow: '',
  buttonStyle: 'count-button-start',
  newPlayerName: '',
  max_chars: 15,
  chars_left: '',
  players
};

最后这个功能应该更新总数但不会和我被困的地方

function Stats(props) {
  const totalPlayers = props.players.length;
  const totalScore = props.players.reduce(
    function(total, player) {
      return props.totalScore + props.totalScore;
    },
    0
  );
  return (
    <div style={{ width: '100%' }}>
        <PlayerNumb>Number of players: <b>{totalPlayers}</b></PlayerNumb>
    </div>
  );
}

const totalPlayers = props.players.length;是我似乎被绊倒的地方。如果我提供任何令人困惑的信息，任何帮助将会非常感激和道歉，因为React对我来说还是新手。

也是我如何调用统计数据的一个例子：

      <Stats
        style={{ width: '100%' }}
        totalScore={this.state.totalScore}
        players={players}
      />

以及如何创建玩家的完整渲染代码

render() {
    const listPlayers = this.state.players.map(player => (
      <Counter
        key={player.id}
        player={player}
        playersArray={this.state.players}
        name={player.name}
        sortableGroupDecorator={this.sortableGroupDecorator}
        decrementCountTotal={this.decrementCountTotal}
        incrementCountTotal={this.incrementCountTotal}
        removePlayer={this.removePlayer.bind(this)} //bind this to stay in the context of the parent component
        handleClick={player}
      />
    ));

    return (
      <ContainLeft style={{ alignItems: 'center' }}>
        <ProjectTitle>Score Keeper</ProjectTitle>
        <Copy>
          A sortable list of players that with adjustable scores.  Warning, don't go negative!
        </Copy>
        <GroupHolder>
          <Stats
            style={{ width: '100%' }}
            totalScore={this.state.totalScore}
            players={players}
          />
          <div
            style={{ width: '100%' }}
            className="container"
            ref={this.sortableContainersDecorator}
          >
            <div className="group">
              <div className="group-list" ref={this.sortableGroupDecorator}>
                {listPlayers}
              </div>
            </div>
          </div>
          <HandleForm>
            <form
              style={{ width: '100%' }}
              onSubmit={this.handleClick.bind(this)}
            >
              <p className="sort-player">Add A Player</p>
              <InputText
                type="text"
                maxLength="15"
                max="4"
                name="usr"
                placeholder="Enter a new name"
                value={this.state.newPlayerName}
                onChange={this.handleChange}
              />
              <PlayerButton onClick={this.handleAddPlayer}>
                Press to Add Player
              </PlayerButton>
              <CharacterCount>
                Characters left
                {' '}
                {this.state.max_chars - this.state.newPlayerName.length}
              </CharacterCount>
            </form>
          </HandleForm>
        </GroupHolder>
      </ContainLeft>
    );
  }
}

export default Container;

Answer 1

您正在使用名为players

的未定义变量调用渲染函数

players={players}

您需要传递this.state.players或使用const players = this.state.players;

进行定义

您应该始终使用编辑器的eslint插件进行本地开发，这会突出显示类似语法错误的问题并节省您的时间。

当新项目添加到阵列时，React，更新阵列的总计数状态

1 个答案: