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

【问题标题】：The variable changes inside of my loop, but stays the same in main code in React Native变量在我的循环内部发生了变化，但在 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 确实改变了循环中的内容？

【问题讨论】：

标签： javascript ios reactjs react-native

【解决方案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> 
}

【讨论】：