Question

我正在编写一个图像组件并坚持使用componentwillreceiveprops。

这是组件的要点......

class ImageField extends React.Component {

constructor(props) {
  super(props);
  this.state = {
    image: '',
    imagePreviewUrl: '',
  };
}

componentWillReceiveProps(newProps){
  if (newProps.content === this.props.content) {
    return;
  }

  this.setState({
    image: this.props.content
  }, function() {
    console.log(this.state.image)
  })
}

我有一个反应表单，它将一个json块发送到ImageField组件，当componentWillReceiveProps触发时，应将this.state.image设置为该json块。

但是它永远不会设置它，当它命中console.log时它返回undefined for this.state.image

现在如果我执行this.setState两次将json写入this.state.image但不想这样做，因为这可能是错误的做法。

坚持，这样做的正确方法是什么？

Answer 1

首先，您需要在构造函数中初始化状态，如下所示，因为在最初创建组件时，不会调用componentWillReceiveProps()，而是使用初始道具调用构造函数。

constructor(props) {
  super(props);
  this.state = {
    image: props.content,
    imagePreviewUrl: '',
  };
}

接下来修改componentWillReceiveProps()，如下所示，以便您使用setState()调用newProps。

componentWillReceiveProps(newProps){
  if (newProps.content === this.props.content) {
    return;
  }

  this.setState({
    image: newProps.content
  }, function() {
    console.log(this.state.image)
  })
}

使用componentwillreceiveprops设置初始状态？

1 个答案: