Question

我有一个负责读取和显示图像的组件，我想在加载图像时显示等待的微调器。我试图通过组件的状态来实现这个目标：

function loadAndCacheImage(imagePath) {
  // Async image loader
};

function displayImage(image) {
  // Display image
};

class Viewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      imagePath: undefined
    }
  };

   componentWillReceiveProps(nextProps) {
    if(nextProps.imagePath!==undefined && this.state.imagePath===undefined) {
      this.setState({loading: true});
    }
  };

  render() {
    const container = (
      <Row>
        <Viewport id={this.props.imageId} />
      </Row>
    );
    return (
        <Spin spinning={this.state.loading} size={'large'} >{container}</Spin>
    );
  };

  componentDidUpdate() {
    if (this.state.loading) {
      loadAndCacheImage(this.props.imagePath).then((image) => {
        displayImage(image);
        this.setState({loading: false, imagePath: this.props.imagePath});
      });

    }
  }
}

现在，问题是当组件接收道具时，它会更新状态，但不会重新渲染组件。它等待异步图像加载器的结束实际更新组件：加载微调器在加载状态设置为true然后立即为false时闪烁一次。

有关如何解决此问题的任何建议？任何帮助将不胜感激。

Answer 1

不确定您到底想要做什么，但看起来您需要使用其他一些生命周期方法

class Viewer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      imagePath: undefined
    }
  };


    componentDidMount() {
      this.setState({ loading: true },
         loadAndCacheImage(this.props.imagePath).then((image) => {
           displayImage(image);
           this.setState({
             loading: false,
              imagePath: this.props.imagePath 
            });
          });
);

      }


  render() {
    const container = (
      <Row>
        <Viewport id={this.props.imageId} />
      </Row>
    );
    return (
        <Spin spinning={this.state.loading} size={'large'} >{container}</Spin>
    );
  };
}

如何在异步调用之前和之后启用React组件重新呈现？

1 个答案: