reactjs - 类型“只读<{}>”上不存在属性“历史”
问题描述
我认为设置状态属性类型有问题,但不确定设置历史记录的正确方法是什么:
class Game extends React.Component<{}, {stepNumber : number, history : Array<any>, xIsNext : boolean } > {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null)
}
],
stepNumber: 0,
xIsNext: true
};
}
此行失败:
const history = this.state.history.slice(0, this.state.stepNumber + 1);
有错误:
Property 'history' does not exist on type 'Readonly<{}>'
完整代码:
class Game extends React.Component<{}, {stepNumber : number, history : Array<any>, xIsNext : boolean } > {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null)
}
],
stepNumber: 0,
xIsNext: true
};
}
handleClick(i) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "O";
this.setState({
history: history.concat([
{
squares: squares
}
]),
stepNumber: history.length,
xIsNext: !this.state.xIsNext
});
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: (step % 2) === 0
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
const moves = history.map((step, move) => {
const desc = move ?
'Go to move #' + move :
'Go to game start';
return (
<li key={move}>
<button onClick={() => this.jumpTo(move)}>{desc}</button>
</li>
);
});
let status;
if (winner) {
status = "Winner: " + winner;
} else {
status = "Next player: " + (this.state.xIsNext ? "X" : "O");
}
return (
<div className="game">
<div className="game-board">
<Board
squares={current.squares}
onClick={i => this.handleClick(i)}
/>
</div>
<div className="game-info">
<div>{status}</div>
<ol>{moves}</ol>
</div>
</div>
);
}
}
export default Game;
解决方案
推荐阅读
- pandas - 按组索引获取组
- javascript - 如何在 Puppeteer 中处理树的最后一个元素?
- javascript - 在 ReactJS 中,如果我们不为 useEffect 提供依赖数组,会导致函数每次都被调用吗?
- java - 在 Espresso 测试中,如何使用 ActivityTestScenario 获取资源
- mongodb - 如何在我的查询结果中使用 mongoDB 集合的键作为具有某些值的键?
- javascript - Discord.js 录制语音频道的 MP3?
- kubernetes - 在 Kubernetes 集群中部署 pod 时出错
- c# - nHibernate:子查询。WhereIn
- azure - 媒体服务作业无法对附加 Blob 进行编码,但使用块 Blob 可以正常工作
- excel - excel日期差异函数获取不正确的结果