变量在我的循环内部发生了变化，但在 React Native 的主代码中保持不变

Posted 2023-03-14

【中文标题】变量在我的循环内部发生了变化，但在 React Native 的主代码中保持不变

【英文标题】：The variable changes inside of my loop, but stays the same in main code in React Native

【发布时间】：2021-03-30 00:46:58

【问题描述】：

我在循环之前声明k，如下所示：

let k = 7;
const [modalOpen, setModalOpen] = useState(false);

我想将k 的值更改为i 的任何值。它成功了：

（seriesList 存储对象）

for (let i in seriesList) 
    <TouchableOpacity onPress=() => 
     setModalOpen(true)
     k = i
     console.log("k inside loop:" + k)>
<Image style=externalStyle.image, top: customTop, left: customLeft, right: customRight, height: 180, width: 200 source=seriesList[i].uri/> 
    </TouchableOpacity> 
                         

但是，当我尝试在 <Modal> 中使用它作为回报时，k 的值与我在循环之前声明的值保持不变。这是<Modal> 代码。

return(
<Modal visible=modalOpen animationType='slide'>
    <TouchableOpacity onPress=() => 
    setModalOpen(false)
     console.log("k outside of loop: " + k)
    > 
     <Image 
     style= width: 50, height: 50, left: 20, bottom: -50
     source=require('../assets/removeblue.png')/> 
 </TouchableOpacity> 

<Image style=height: 200, width: 200,  bottom: -40, left: 105 source=seriesList[k].uri/>
 <Text
 style=
 bottom: -60,
 color: 'black',
 fontFamily: 'MarkerFelt-Thin',
 fontSize: 21,
 textAlign: 'left'
          
Name:  seriesList[k].name</Text>
 <Text
 style=
 bottom: -90,
 color: 'black',
 fontFamily: 'MarkerFelt-Thin',
 fontSize: 21,
 textAlign: 'left'
          
Year:  seriesList[k].year</Text>
 <Text
 style=
 bottom: -120,
 color: 'black',
 fontSize: 21,
 textAlign: 'left',
 fontFamily: 'MarkerFelt-Thin'
         
Description:  seriesList[k].description</Text> 
</Modal> 
)

有谁知道如何确保<Modal> 中的k 确实改变了循环中的内容？

【参考方案1】：

您确实使用TouchableOpacity 的onPress 回调设置了k = i，但您的Modal 不会重新渲染，因为没有状态更改。尝试用状态控制k。

const [k, setK] = useState(7);

for (let i in seriesList) 
    <TouchableOpacity onPress=() => 
      setModalOpen(true);
      setK(i);
    >
       <Image style=externalStyle.image, top: customTop, left: customLeft, right: customRight, height: 180, width: 200 source=seriesList[i].uri/> 
    </TouchableOpacity>