来自父母更新道具的 REACT ES6 更新状态

Question

我只是在遵循旧版本的 React 中的 Treehouse 教程，我试图在 ES6 中遵循它。

我有一个显示玩家数量和总分的统计组件。您可以添加玩家并更改分数，同时道具一直通过链条馈送。

您可以清楚地看到在“开发人员工具”中，在选择“添加新播放器时”更新道具的DOM元素“中的”统计“元素。所以道具很好。

代码如下：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Stats extends Component {
  constructor(props) {
    super(props);

    this.state = {
      totalPlayers: props.players.length,
      totalPoints: props.players.reduce((total, player) => {
        return total + player.score;
      }, 0)
    };
  }

  render() {
    return (
      <table className="stats">
        <tbody>
          <tr>
            <td>Players:</td>
            <td>{this.state.totalPlayers}</td>
          </tr>
          <tr>
            <td>Total Points:</td>
            <td>{this.state.totalPoints}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

Stats.propTypes = {
  players: PropTypes.array.isRequired
};

export default Stats;

totalPlayers 和 totalPoints 基本上会在加载时显示，但在进行任何进一步的编辑时不会有任何更新。我知道在渲染模板中我可以直接添加 this.props.players.length 和 props.players.reduce(...) 并且可以工作，但我认为从父问题状态更新的这个道具是阻止直到得到答复为止。

我知道它是这样工作的

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Stats extends Component {  
  render() {
    return (
      <table className="stats">
        <tbody>
          <tr>
            <td>Players:</td>
            <td>{this.props.players.length}</td>
          </tr>
          <tr>
            <td>Total Points:</td>
            <td>{this.props.players.reduce((total, player) => {
                  return total + player.score;
                }, 0)}
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

Stats.propTypes = {
  players: PropTypes.array.isRequired
};

export default Stats;

但我不想在标记中出现这种污点：-S 必须有办法。

提前感谢您对此的任何建议。

Answer 1

React“组件实例”在卸载之前不会被销毁。所以状态应该在组件的生命周期中改变。

另见https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Stats extends Component {
  constructor(props) {
    super(props);

    this.state = {
      totalPlayers: props.players.length,
      totalPoints: props.players.reduce((total, player) => {
        return total + player.score;
      }, 0)
    };
  }

  componentWillReceiveProps(nextProps) {
    const {players} = nextProps;

    this.setState({
      totalPlayers: players.length,
      totalPoints: players.reduce((total, player) => {
        return total + player.score;
      }, 0)
    });
  }

  render() {
    return (
      <table className="stats">
        <tbody>
          <tr>
            <td>Players:</td>
            <td>{this.state.totalPlayers}</td>
          </tr>
          <tr>
            <td>Total Points:</td>
            <td>{this.state.totalPoints}</td>
          </tr>
        </tbody>
      </table>
    );
  }
}

Stats.propTypes = {
  players: PropTypes.array.isRequired
};

export default Stats;

在这种情况下，我建议只使用道具。

getTotalCount() { return this.props.players.length; }

calcTotalPoints() {
    return this.props.players.reduce((total, player) => {
        return total + player.score;
    }, 0)
}

render() {
    <div>
        <div>{this.getTotalCount()}</div>
        <div>{this.calcTotalPoints()}</div>
    <div>
}