Блог

Здесь я пытаюсь отображать изображения и заголовки в зависимости от значения num . Поскольку предполагается, что индекс от 0-4 содержит случайные изображения, когда я нажимаю кнопку далее, заголовок меняется, но изображения остаются прежними, он не обновляется. Как мне сопоставить это таким образом, чтобы каждый раз, когда я нажимаю кнопку далее, появлялись разные изображения?

 export default class MainContainer extends Component { 
constructor() {
  super();

  this.state = {
    posts: [
        {
            "title": "Title 1",
            "image": "https://source.unsplash.com/random"
          },
          {
            "title": "Title 2",
            "image": "https://source.unsplash.com/random"
          },
          {
            "title": "Title 3",
            "image": "https://source.unsplash.com/random"
          },
          {
            "title": "Title 4",
            "image": "https://source.unsplash.com/random"
          },
          {
            "title": "Title 5",
            "image": "https://source.unsplash.com/random"
          },
          {
            "title": "Title 6",
            "image": "https://www.instagram.com/static/images/ico/apple-touch-icon-76x76-precomposed.png/4272e394f5ad.png"
          }
    ],
    num : 0,
  }
}

nextPic = () => {
   if(this.state.num > 4) {
       this.setState({
           num : 0
       })
   } else {
       this.setState({
           num : this.state.num   1
       })
   }
}

render() {
    return(
        <div>
            <h1>{this.state.posts[this.state.num].title}</h1>
            <img src={this.state.posts[this.state.num].image} />
            <button onClick={this.nextPic}>Next</button>
        </div>
    )
}
  

}

Вам нужно каким-либо образом изменять URL-адрес при каждом вызове react, чтобы обнаруживать изменения и повторно отображать новое изображение. Один из способов сделать это — добавить запрос со случайным целым числом к URL.

Например:-

 getImageSource() {
    const randomNumber = Math.floor(Math.random() * 10);
    return `https://source.unsplash.com/random?${randomNumber}`;
}
  

Рабочий пример: —
https://codesandbox.io/s/z30qom5m8x?fontsize=14

Это не проблема ReactJS. Если у вас будут обычные пути к изображениям, и они будут разными, все будет отображаться правильно с разными изображениями.

Каким-то образом unplash и picsum возвращают одинаковые изображения при повторении их случайных путей.