javascript - 在 React 中，为什么将数字形式的状态添加到数字形式的 prop 中会产生字符串？

Question

如果我执行以下操作:

this.setState( { skip: this.state.skip + this.props.PageSize } );

结果是一个字符串，(例如“0555”，当它尝试每次点击添加 5 时)

在调试期间，它将 this.state.skip 显示为数字，但 this.props.PageSize 显示为字符串。然而，prop 被定义为一个数字:

export interface IMyProps{
  Description: string;
  Context: WebPartContext;
  Environment: string;
  PageSize: number;
}

我总是需要解析 React props 吗？看起来很奇怪。

编辑:尝试执行以下操作:

parseInt(this.props.Pagesize)

失败是因为，很明显，你无法将数字解析为 int，而只能解析为字符串。

Answer 1

根据您提供的详细信息，这看起来像是一个逻辑问题，但您可以像下面这样更改代码来解决此问题

const { PageSize } = this.props;
this.setState(prevState => ({ skip: prevState.skip + parseInt(`${PageSize}`) }));

prevState.skip

当需要根据当前状态更新新状态时，我们应该使用 setState 内部的函数。

parseInt(${PageSize})

这确保您拥有字符串值，然后将其解析为整数。

如果您确保传递的是数字而不是字符串，则不需要此操作