javascript——如何将两个状态变量传递到同一个状态？-阵列&amp；整数

创创精灵 lv.1

发布时间：2022-04-21 10:42:06 184

相关标签： # json# 服务器# 数据# 服务器# 信息

在一个电子商务商店项目中，我有一个滑块组件。

我从本地主机服务器获取自己的JSON数据，并映射到每个幻灯片的数组。

我的目标是找到一种方法，使用相同的useState()将项目渲染到页面上，并单击按钮移动到下一张幻灯片。

我已经尝试做一些像useState([]， 0)一个为我的数组和另一个更改按钮点击索引，但这没有工作，哈哈…

数组当然是要显示的数据，但对我来说棘手的部分是想出一个方法移动到下一页。

我试图在Wrapper样式的组件中使用transform:translateX，并试图传入一些道具，这样我就可以将幻灯片切换到下一张幻灯片，同时仍然在页面上呈现数据。

如何根据我的代码以上述方式使用状态?

***在阅读代码片段，我当前的代码显示，我已经尝试创建两个状态，并传递我的整数到我的fetch请求的第二个状态，没有错误弹出，但它显然不工作，因为它没有一个数组的项目索引通过。

在代码片段中，我包含了整个slider；还有我的数据里面的信息.json文件。

import {useState, useEffect} from 'react';
import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/icons";

import styled from "styled-components";

const Container = styled.div`
    width: 100%;
    height: 95vh;
    display: flex;
    // background-color: #b3f0ff;
    position: relative;
    overflow: hidden;s
`;
    const Arrow = styled.div`
    width: 50px;
    height: 50px;
    background-color: #e6ffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: ${props => props.direction === "left" && "10px"};
    right: ${props => props.direction === "right" && "10px"};
    margin: auto;
    cursor: pointer;
    opacity: 0.5;
    z-index: 2;
`;
const Wrapper = styled.div`
    height: 100%;
    display: flex;
    transform: translateX({props => props.arrowIndx * -100}vw);
`
const Slide = styled.div`
    width: 100vw;
    height: 100vw;
    display: flex;
    align-items: center;
    background-color: ${props => props.bg};
`
const ImgContainer = styled.div`
    height: 100%;
    flex:1;
`
const Image = styled.img`
    padding-left: 30px;
    align-items: left;
`
const InfoContainer = styled.div`
    height: 80%;
    flex:1;
    padding: 30px;
`
const Title = styled.h1`
    font-size: 50px
`
const Desc = styled.p`
    margin: 50px 0px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 3px;
`
const Button = styled.button`
    padding: 10px;
    font-size: 20px;
    background-color: transparent;
    cursor: pointer;
`


const Slider = () => {
    const [slideIndx, setSlideIndx] = useState([]);
    const [arrowIndx, setArrowIndx] = useState(0);

    const handleClick = (direction) => {

        if(direction === "left"){
            setArrowIndx(arrowIndx > 0 ? arrowIndx - 1 : 2)
        } else{
            setArrowIndx(arrowIndx < 2 ? arrowIndx + 1 : 0)
        }
    }


    const fetchSliderItems = () => {
        fetch('http://localhost:3000/sliderItems')
        .then(resp => resp.json())
        .then(data => {
            console.log(data)
            setArrowIndx(data)
            setSlideIndx(data)
        })
    }
    useEffect(() => {fetchSliderItems()}, [])


  return (
    
         handleClick("left")}>
            
        
        
        {slideIndx.map((item) => (
            
                
            
            
                
                {item.desc}
                
            
            
        ))}
        

         handleClick("right")}>
            
        

    
  )
}

export default Slider

{
  "sliderItems": [

    {
        "id": 1,
        "img": "../images/model1.png",
        "title": "SPRING CLEANING",
        "desc": "DONT MISS OUR BEST COLLECTION YET! USE #FLATIRON10 TO RECEIVE 10% OFF YOUR FIRST ORDER",
        "bg": "#b3ecff"
      },
      {
        "id": 2,
        "img": "../images/model2.png",
        "title": "SHOW OFF HOW YOU DRESS",
        "desc": "WITH OUR HUGE SELECTION OF CLOTHES WE FIT ALL YOUR STYLING NEEDS",
        "bg": "#ccf2ff"
      },
      {
        "id": 3,
        "img": "../images/model3.png",
        "title": "POPULAR DEALS",
        "desc": "RECEIVE FREE SHIPPING ON ALL ORDERS OVER $50!",
        "bg": "#fe6f9ff"
      }
  ]
}

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。