在这种情况下使用 .map 是否正确？

Question

我昨天整天都被这个问题困扰。 我必须制作一个滑块来显示带有来自对象的文本的图像。 我制作了图像和文本的模型并将其保存在 .json 中。这按预期工作。

但现在我从 Jsonplaceholder 获取数据，当我执行 .map 方法时，它对我不起作用。 我知道问题出在 .map 方法的索引方面。

我想要做的是，当按下左或右按钮时，它会在屏幕上显示“索引”与变量“当前”匹配的图像和文本。

'Current' 很好，因为我看到它在按下左右按钮时会更新（上一个 - 下一个） 但是索引没有更新或者没有带来正确的数字导致函数失败。

const Slider = () => {
    const [current, setCurrent] = useState(0);
    const [get] = useHttpService();
    /* const [data, setData] = useState({
        title: '',
        url: '',
        text: '',
        id: ''
    });
    const length = data.length;



    useEffect(() => {
        get("https://jsonplaceholder.typicode.com/photos")
            .then(res => { setData(res) })
            .catch(err => console.log(err))

    }, []);

    const nextSlide = () => {
        setCurrent(current === length - 1 ? 0 : current + 1);

    };

    const prevSlide = () => {
        setCurrent(current === 0 ? length - 1 : current - 1)
    };


    if (length <= 0) {
        return <SpinnerLoader />;

    }


    else return (
        <section className="slider">
        <FaArrowAltCircleLeft className="left-arrow" onClick={prevSlide} />
        <FaArrowAltCircleRight className="right-arrow" onClick={nextSlide} />

        {data.map((slide, index) => {
            return (
                <div className={index === current ? 'slide-active' : 'slide'}
                    key={index}>

                    {index === current && (
                        <div>
                            <img src={slide.url}
                                alt={slide.title}
                                className="image" />
                            <p className="text"> {slide.text}</p>
                        </div>
                    )}
                </div>
            )
        })}
    </section>
    )
}

谢谢大家

Answer 1

您似乎没有更新您的 length 变量。此外，map 仅适用于可迭代对象，因此您可能需要传播和包装您的响应并将一个空列表设置为 data 的初始状态。

const [current, setCurrent] = useState(0);
const [data, setData] = useState([]);
const [length, setLength] = useState(data.length);

useEffect(() => {
  fetch("https://jsonplaceholder.typicode.com/photos")
      .then(res => { 
        setData([...res.json()]);
        setLength(data.length);
      })
      .catch(err => console.log(err))

}, []);