REACT ES6 从父级更新道具更新状态

Question

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

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

在选择添加新玩家时更新道具的 Stats 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;

基本上，总玩家和总积分在加载时显示，但在进行任何进一步编辑时，没有任何更新。 我知道在渲染模板中，我可以直接添加 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 "component instance" 在卸载之前不会被销毁。因此，应该在组件的生命周期中更改状态。

另请参阅 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>
}