javascript - data.loading 为 false 时立即响应 : How can I call a method only once in the lifecycle of a component,

Question

我有一个 React 组件，其属性“total”在每次更新组件时都会发生变化:

function MyView(props) {
  const total = props.data.loading ? 0 : props.data.total;
  return (
    <p> total </p>
  );
}

组件第一次安装时，总数为 10。每次组件由于 prop 更改而更新时，总数都会增加。

有没有办法可以显示原始总数(在本例中为 10)？

我尝试在 componentDidMount 内的 this.total 中设置它，但是在调用 componentDidMount 时 props.data.total 还不可用。与构造函数相同。仅当 props.data.loading 为 false 时，总数才可用。

Answer 1

为了访问生命周期功能，您必须从函数、无状态组件、to a class component 转移。 .

在下面的示例中，InitialTotal 在 construstor 生命周期方法中初始化，并且永远不会改变。

currentTotal，每次调用渲染函数时都会递增 - 当组件重新渲染时(由于 Prop 更改或状态更改)

它应该看起来像这样:

class MyView extends React.Component {
  constructor(props) {
    super(props)

    this.initialTotal = 10;
    this.currentTotal = 10;
  }
  render() {
    this.currentTotal+=1;
    return (
      <p>InitialToal: {this.initialTotal}</p>
      <p>Current Total: {this.currentTotal}</p>
    );
  }
}