反应本机状态变量不会从道具更新

Question

我正在向类传递3个道具-numLikes，id和userLiked，我想在发生任何渲染之前先设置状态变量。 理想情况下，状态变量的值应等于其对应的prop对应值，但事实并非如此。

这是我的代码：

export default class LikeButton2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      numLikes: props.numLikes,
      id: props.id,
      userLiked: props.userLiked,
      isloading: true,
    };
  }
 //....
}

我使用React Native Debugger检查变量值，并且变量“ numLikes”和“ userLiked”没有更新。所附证明是相同的：

我也尝试使用传播语法。 这是我的代码：

export default class LikeButton2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props,
      isLoading: true,
    };
  }
 //....
}

尽管这也会导致状态变量的值不理想。 RN调试器中的证明：

如何正确更新值？

Answer 1

在此示例中，当安装要显示的组件时，状态设置为等于道具。构造函数仅在那时被调用。

此后，如果道具发生变化，状态将不会更新以匹配它们。如果要在道具更改时更新状态，则需要使用方法ComponentDidUpdate：ComponentDidUpdate(prevProps,prevState)。

每次道具或状态改变时都会调用它。然后，您可以比较当前道具（this.props）和以前的道具（prevProps），以相应地设置状态。

如果您只想按原样使用道具，则可以只使用this.props，它将始终反映您为组件提供的价值。

如果我在代码中的某个地方有<Component number={myNumber}/>，每次myNumber更改时Component都会重新呈现，并且Component中的值this.props.myNumber将是准确的。

export default class ComponentTest extends Component {
  constructor(props) {
    super(props);
  }
  render() {
     return <div>{this.props.number}</div>
  }
}