如何在react native render中以无限循环返回数组项视图？

Question

假设list.length是5我需要在无限循环中返回下面的视图。不是在5的循环中。我想把数组一个一个的过一遍，当它来到索引4的时候，它应该再次指向0索引，这个过程应该是递归执行的，
在这里，它会在来到数组的最后一个索引之后停止。当"i"来到数组的最后一个索引时，我尝试设置"i=0"，但无法访问。有没有办法在javascript中实现这个场景。

注：我将粘贴我的渲染方法的一些代码片段在我的反应本机jsx文件中。欢迎任何评论。

return this.state.list
      .map((item, i) => {
        if (i === this.state.currentIndex) {
          return (
            <Animated.View
              {...this.panResponder.panHandlers}
              key={item.id}
              style={[
                this.rotateAndTranslate,
                { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: "absolute" }
              ]}
            >
              <Animated.View
                style={{
                  opacity: this.likeOpacity,
                  transform: [{ rotate: "-30deg" }],
                  position: "absolute",
                  top: 50,
                  left: 40,
                  zIndex: 1000
                }}
              >
              ....................more codes....................... 
              </Animated.View>

              <Image style={{ flex: 1, resizeMode: "contain", borderRadius: 20 }} source={{ uri: item.image }} />
            </Animated.View>
          );
        }else{
           return something;
        }

    }).reverse();

Answer 1

像这样修改i不会对下一次迭代产生任何影响，因为它是传递给map的函数中的参数。如果您想像这样操作i，您应该使用在循环主体范围之外定义了i的循环。

差不多

let i = 0;
while (i < this.state.list.length) {
  if (something) {
    i++;
  } else {
    i = 0;
  }
}

要确切理解你想实现什么有点困难，但希望这有助于澄清一些困惑。

Answer 2

我认为你需要一个功能组件，5点击后重新加载。.

// Get a hook function
const {useState, useEffect} = React;

const Example = ({title}) => {
  const [count, setCount] = useState(0);
  
  const [compCount, setCompCount] = useState(0);
  return (
    <div>
    {<GetComp value={compCount}/>}
      <button onClick={() => {
        setCount(count+1);
        if(count % 5 ==0 && count != 0){
          setCompCount(compCount + 5)
        }
      }}>
        Click me
      </button>
    </div>
  );
};

const GetComp = props => {
  return [1,2,3,4,5].map(e => <div> {e+props.value} </div>)
}

// Render it
ReactDOM.render(
  <Example title="Example using Hooks:" />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>