在 React.js 中为“滑块”组件分配给 State 后，尝试遍历“获取”JSON 数据

Question

pretty new to React so don't clown me to hard haha.

Essentially my goal is to fetch the data from my personal JSON server & render that data onto a "Slider" that I am creating.

I am following along with a tutorial and decided to give myself a challenge, the only difference is that where he just imported a data.js file with his data, I wanted to use JSON data / server instead.

The issues is that I'm not sure how to ".map()" through the data for each slide and render to the slider. I have a general idea of how but I'm not fully sure how to implement it correctly in the context of using JSON data with fetch requests.

I have fetched my JSON url and used.thens to string my responses & assign the data to a state setter function. When I console.log the data I receive the object successfully but twice.

Read online that I could use the first variable of state to.map(), attempted and has not worked.

Sorry if this has been touched on before, I have tried everything to find this info before asking but to no avail.

The error I receive is in regards to me using the state variable "slideIndx.map" not being a function.

What can I do here?

 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; `; 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(0vw) ` 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(0); const fetchSliderItems = () => { fetch('http://localhost:3000/sliderItems').then(resp => resp.json()).then(data => { console.log(data) setSlideIndx(data) }) } useEffect(() => {fetchSliderItems()}, []) const handleClick = (direction) => {} return ( <Container> <Arrow direction="left" onClick={() => handleClick("left")}> <ArrowLeftOutlined /> </Arrow> // Here is where I am attempting to map over the items. <Wrapper> {fetchSliderItems.map((item) => ( <Slide bg={item.bg}> <ImgContainer> <Image src={item.img}/> </ImgContainer> <InfoContainer> <Title>{item.title}</Title> <Desc>{item.desc}</Desc> <Button>SHOP NOW</Button> </InfoContainer> </Slide> ))} </Wrapper> <Arrow direction="right" onClick={() => handleClick("right")}> <ArrowRightOutlined /> </Arrow> </Container> ) } 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": "https.//i.ibb.co/DG69bQ4/2,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/model1,png": "title", "POPULAR DEALS": "desc", "RECEIVE FREE SHIPPING ON ALL ORDERS OVER $50:", "bg": "fe6f9ff" } ] }

Answer 1

You should share the error you're getting. But based on the second screenshot, it looks like your array is wrapped in a sliderItems object.

You want a raw array when you .map . So maybe try setting your slideIndx to the raw array by doing something like:

setSlideIndx(data.sliderItems)

Try confirming the shape of your state by console logging above your return with:

console.log(slideIndx)

Answer 2

You're calling map from fetchSliderItems.map , but fetchSliderItems is a function, not an array. You need to call map from the array containing the data, which in your case is slideIndx.sliderItems .

What happens in your code is const [slideIndx, setSlideIndx] = useState(0); initializes slideIndx to 0 . When useEffect runs fetchSliderItems , you'll fetch the data and eventually the line setSlideIndx(data) assigns data to slideIndx . Because your data is an object that holds and array in the sliderItems property, the array can now be accessed in slideIndx.sliderItems .

So fist thing you should do to fix it is change the useState line to const [slideIndx, setSlideIndx] = useState([]); , because you want your state variable to be an array. Then when you fetch the data you want to call setSlideIndx(data.sliderItems) to assign your data to slideIndx . Finally, in your jsx return you should use slideIndx.map .