Question

因此，用户可以使用以下功能通过输入元素来更改状态：

handleCardChange = (event, style) => {
let updated = event.target.value;
this.setState(previousState => ({
  styling: {
    ...previousState.styling,
    styling: {
      ...previousState.styling.styling,
      card: {
        ...previousState.styling.styling.card,
        height: updated
      }
    }
  }
}))

}

这将更新状态，例如，如果用户在字段中输入“ 600px”，则状态将为600px。由于状态已更改，因此我想触发子组件的重新渲染，因为它使用了其道具。

我为此使用了componentWillReceiveProps（）：

componentWillReceiveProps(nextProps) {
    console.log("componentWillRecieveProps: ", this.props.styling.styling.card.height);
    this.state = {
        styling: this.props.styling.styling
    }
}

我遇到的问题是，孩子始终始终落后于父母一个字符。因此，如果父母的身高为600px，则孩子的值为600p，我需要在输入中添加另一个字符以供孩子更新。

有什么办法可以解决这个问题，并确保子组件能够与父组件保持最新状态？

反应：componentWillRecieveProps始终比父状态落后一步

0 个答案: