时间戳

首页 > 解决方案 > 如何使函数更改数组索引？

javascript - 如何使函数更改数组索引？

问题描述

所以我最近更新了我的图像滑块以使用反应钩子，现在事情已经坏了，我不知道为什么。

当我单击上一个或下一个时，我希望滑块更改为具有正确索引的数组，但没有任何反应。我可以看到索引发生了变化，但我不明白为什么它不会更改为新数组。现在它总是在索引为 0 的数组上。

我尝试了什么：

由此：

setImages(currenState => ({ ...currenState,
  posters: result[0]
}));

let poster = posters.map((item, index) => (<img src={item} alt="poster" style={style.poster}
key={index}/>));

对此

setImages(currenState => ({...currenState, 
  posters: result
}));

let poster = posters[1].map((item, index) => (<img src={item} alt="poster" style={style.poster} key={index} />   ));

并且

let poster = posters["1"].map((item, index) => (<img src={item} alt="poster" style={style.poster} key={index} />));

但如果我这样做，我会收到此错误：TypeError: Cannot read property 'map' of undefined。这在我将组件从类组件更改为使用钩子之前有效。

我在这里创建了一个沙箱： https ://codesandbox.io/s/ancient-firefly-wzxi0?file=/src/Slider.js

标签： javascriptarraysreactjsreact-hooks

解决方案

所以首先你需要更新你的使用效果来依赖你的状态而不是一个空数组，否则它只会执行你的函数一次，这意味着你只sortIntoArray用初始状态调用。所以尝试类似的东西

useEffect(() => {
    sortIntoArray();
  }, [images.idx]);

这意味着每次images.idx状态发生变化时，它都会再次调用你的效果。

其次，在您的sortIntoArray函数中，我发现了一个错误，它将设置为字符串而不是会导致错误posters的数组。map of undefined

我不明白您为什么要尝试将数组分成 3 个部分，然后将海报设置为该数组中的正确项目。所以我更新了你的sortIntoArray功能，看起来像

const sortIntoArray = () => {
    let posterImages = [...images.items];

    let size = 3;

    let posters = posterImages.slice(
      images.idx * size,
      (1 + images.idx) * size
    );

    setImages(currenState => ({
      ...currenState,
      posters
    }));
  };

这里的不同之处在于我们只是使用 slice 抓取正确的小节并将海报设置为等于该小节。

我还必须根据以前的更改将您的下一个功能更新为以下功能

const nextSlide = () => {
    let current = images.idx;
    let next = current + 1;

    let posterLength = Math.ceil(images.items.length / size) - 1;

    if (next > posterLength) {
      next = posterLength;
    }

    setImages(currentState => {
      return {
        ...currentState,
        idx: next
      };
    });
  };

这里的不同之处在于，我们只是根据将项目总数除以大小来确定海报长度。

你可以在这里看到这一切：https ://codesandbox.io/s/red-snow-1cs0e?file=/src/Slider.js这就是你所追求的吗？

推荐阅读