Creé una función para deslizar la imagen del producto seleccionado dentro de la diapositiva con btns de flecha izquierda y derecha. pero cuando se hace clic, se desliza cada imagen del elemento, no solo una. No pude usar la variable newSlideArray fuera de la función. ¿Alguien puede explicarme cómo deslizar la imagen de un solo elemento en la diapositiva?
Aquí está mi código fuente:
class ViewCart extends Component { constructor(props){ super(props); this.state = { index: 0 } nextSlide =(item)=> { let newSlideArray = []; item.gallery.map(img => newSlideArray.push(img)) if(this.state.index === (newSlideArray.length - 1)){ this.setState({ index: 0 }) }else{ this.setState({ index: this.state.index + 1 }) } } render() { return ( {this.props.cart.map((item, index) => ( <div> <div className={styles.slide}> <div className={styles.leftArrow} onClick={()=> {this.previousSlide(item)}}>← <div className={styles.rightArrow} onClick={()=> {this.nextSlide(item)}}>→ <img src={item.gallery[this.state.index]} alt="" /> </div> </div> ))} </div> ); } }[![ingrese la descripción de la imagen aquí][1]][1]
aquí está. Cuando se presiona la flecha derecha, se desliza cada imagen del producto hacia la derecha, no solo una. [1]: https://i.stack.imgur.com/Xw0ME.png
Tienes que mantener el índice de imágenes para cada item . Estoy usando un estilo funcional por simplicidad.
const [indexes, setIndexes] = useState({}); Suponiendo que el artículo tiene una id :
const nextSlide = (item) => { const curIndex = indexes[item.id] || 0; const newIndex = curIndex === item.gallery.length - 1 ? 0 : curIndex + 1; setIndexes({ ...indexes, [item.id]: newIndex }); };Y entonces:
<img src={item.gallery[indexes[item.id] || 0]} alt="" />El problema con su código es que todas las tarjetas comparten el mismo estado, lo que hace que cuando el estado de una sola tarjeta cambie, todas las demás tarjetas se verán afectadas. intente separarlos haciendo que su estado tenga un índice para cada tarjeta dentro del ViewCart y cuando haga clic en los botones siguiente o anterior, pase a la función el índice de esa tarjeta para actualizar su estado por separado.
Algo como esto:
class ViewCart extends Component { constructor(props){ super(props); this.state = this.props.cart.map(()=>({index:0})) nextSlide =(item,index)=> { const galleryLen = item.gallery.length if(this.state[index].index === (galleryLen - 1)){ const arr = [...this.state] arr[index] = {index: 0} this.setState(arr) }else{ const arr = [...this.state] arr[index] = {index: this.state[index]+1} this.setState(arr) this.setState(arr) } } render() { return ( {this.props.cart.map((item, i) => ( <div> <div className={styles.slide}> <div className={styles.leftArrow} onClick={()=> {this.previousSlide(item,i)}}>← <div className={styles.rightArrow} onClick={()=> {this.nextSlide(item,i)}}>→ <img src={item.gallery[this.state[i].index]} alt="" /> </div> </div> ))} </div> ); } }