Я сделал карусель. Когда я нажимаю на миниатюру, источник изображения меняется. В функции changeSrc я регистрирую состояние selectedIndex. Первый раз, когда я нажимаю на миниатюру, я получаю старый индекс, и только второй раз, когда я нажимаю на миниатюру, я получаю правильный индекс в своей консоли. Есть ли способ обновить индекс до выполнения функции, а не после?

Это также создает проблемы при добавлении кнопок со стрелками «предыдущий» и «следующий». Надеюсь, кто-нибудь может мне помочь?

Это мой код .

import React, { Component } from 'react'
import './App.css'
import Image from './components/Image'
import image1 from './assets/image1.jpg'
import image2 from './assets/image2.jpg'
import image3 from './assets/image3.jpg' 
import image4 from './assets/image4.jpg'

class App extends Component{
  constructor(props){
    super(props);
    this.state = {
      imageSrc : image1,
      images : [image1,image2,image3,image4],
      imageCaption : "landscape 1",
      selectedIndex : 0
    }
  }

  changeSrc = (caption, index) => {
    this.setState({imageCaption : caption});
    this.setState({selectedIndex : index});
    this.setState({imageSrc : this.state.images[index]});
    console.log(this.state.selectedIndex)
  }

  render(){

    return(
      <div className="container">
        <Image imageSrc={this.state.imageSrc} imageCaption={this.state.imageCaption}/>
        <div className="thumbs">
          <img onClick={() => this.changeSrc("landscape 1" , 0)} src={this.state.images[0]} alt="thumbnail 1"/>
          <img onClick={() => this.changeSrc("landscape 2", 1)} src={this.state.images[1]}alt="thumbnail 2"/>
          <img onClick={() => this.changeSrc("landscape 3", 2)} src={this.state.images[2]}alt="thumbnail 3"/>
          <img onClick={() => this.changeSrc("landscape 4", 3)} src={this.state.images[3]}alt="thumbnail 4"/>
        </div>
      </div>
    )
  }
}

export default App
import React, { Component } from 'react';

class Image extends Component{
  render(){
    return(
      <div className="imageContainer">
        <img src={this.props.imageSrc} alt="landscape 1"/>
        <span className="caption">{this.props.imageCaption}</span>
      </div>
    )
  }
}

export default Image
0
Joeri Groot 25 Фев 2020 в 16:12

2 ответа

Лучший ответ

Обновления состояния не являются немедленными, и они асинхронны и пакетируются React.

Вы ищете обратный вызов после обновления состояния. Второй аргумент в setState является ссылкой обратного вызова, которая выполняется после обновления состояния, на которое можно положиться.

Кроме того, поскольку вы полагаетесь на значение из своего состояния в setState, я изменил его на функциональный setState, который снова гарантирует, что у вас есть последнее значение состояния во время обновления для imageSrc.

changeSrc = (caption, index) => {
  this.setState((previousState) => {
    imageCaption: caption,
    selectedIndex: index,
    imageSrc: previousState.images[index]
  }, () => console.log(this.state.selectedIndex))
}
1
Rikin 25 Фев 2020 в 13:16

Проблема в том, что вы регистрируете индекс в функции. Имейте в виду, что setState является асинхронным. Поэтому, когда вы регистрируете состояние, как это:

this.setState({imageSrc : this.state.images[index]});
console.log(this.state.selectedIndex)

Индекс всегда будет старым индексом.

0
Dustin Gogoll 25 Фев 2020 в 13:17