Question

当用户点击下一个按钮时，图库中的下一张图片将加载一些标题和说明。

第一张图片载有标题和说明。当我单击下一步时，描述和标题会立即更改。但我只能看到第一张照片。显示第二张图片需要几秒钟。所以它会让用户感到困惑。

removeFirstPicture(id) { //onclick next
        let pictures = this.state.pictures;        
        return pictures.filter(p => p.picture_id !== id);
    }

render() {
   let p = [...this.state.pictures].slice(0, 1);
}

return函数有一个组件，它将标题，图片和描述作为道具接收。

我试图将图片设为null

let pic = null
        setTimeout(() => {
            pic = <p><CardImg top src={this.props.picture} alt={this.props.title} /></p>;
        }, 300);

所以我想，我会为每次下一次按钮点击加载null，300ms后它会尝试加载原始图片。但它没有用。图片总是空的

请给我一些解决方案。单击下一个按钮后，几秒钟内不应显示第一个图像。

Answer 1

一种方法是给CardImg loading状态，给它一个默认值true。您应该在loading为true时显示占位符图片。然后，您可以在图片加载完毕后使用image.onload将loading设置为false。

image.onload

Example of image.onload usage in React

Answer 2

我不确定你如何获得 next 图像，但应该使用Promises。一旦承诺得到解决，你就可以改变自己的状态，就像我在这个例子中所做的那样：

class Picture extends React.Component {
    constructor(props){
    super(props);
    this.state = {
        isLoaded: false,
      next: 'white'
    }

    this.fetchNextPicture = this.fetchNextPicture.bind(this)
  }

  componentDidMount(){
    this.fetchNextPicture()
  }

  fetchNextPicture(){
    this.setState({ isLoaded: true });
    // here i just simulate async call, so you can change it to fetch or something else
    return new Promise(
      (resolve) => setTimeout(() => resolve({ next: "#"+((1<<24)*Math.random()|0).toString(16) }), 2000),
      (reject) => reject('Something went wrong')
      ).then(
        // Promise is resolved & we good to change our state to new
        data => this.setState({ next: data.next, text: data.next, isLoaded: false}),
        error => console.log(error)
    )
  }

  render() {
    const style = {
      width: '300px',
      height: '300px',
      backgroundColor: this.state.next,
      color: 'tomato',
      lineHeight: '300px',
      textAlign: 'center',
      fontSize: '20px'
    }

    return (
        <div>
          {this.state.isLoaded 
            ? <div> loading </div>
            : <div style={style}>
                {this.state.text}
              </div>}
        <button onClick={this.fetchNextPicture}>
          Next
        </button>
      </div>
    )
  }
}

Worked example

ReactJS - 图库应用程序 - 显示上一张图片，直到下一张图片满载

2 个答案: