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

Question

所以我最近更新了我的图像滑块以使用反应钩子，现在事情已经坏了，我不知道为什么。当我单击上一个或下一个时，我希望滑块更改为具有正确索引的数组，但没有任何反应。我可以看到索引发生了变化，但我不明白为什么它不会更改为新数组。现在它总是在索引为 0 的数组上。我尝试了什么：从 sortIntoArray 中删除数组索引并直接在 map 函数中使用它。作为数字和字符串。由此：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。这在我将组件从类组件更改为使用钩子之前有效。我尝试向 sortIntoArray 添加参数并直接从 nextSlide 和 prevSlide 调用它。我在这里创建了一个沙箱： https ://codesandbox.io/s/ancient-firefly-wzxi0?file=/src/Slider.js

Answer 1

所以首先你需要更新你的使用效果来依赖你的状态而不是一个空数组，否则它只会执行你的函数一次，这意味着你只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这就是你所追求的吗？