使用循環來渲染圖像和更新狀態，並顯示渲染圖像

Question

我需要做兩件事情裏面的狀態值：

1，採用循環

我用這件事比我的代碼兩次：

<Image 
 
source={require('./Images/ballline.png')} 
 
    style={styles.ballStyle} > 
 
    
 
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}> 
 
    
 
     {this.state.display} 
 
    
 
</Text> 
 
    
 
</Image>

所以我所做的是我用for循環使用6次

創建了一個功能

我的功能是這樣的：

displayBalls() { 
 

 
    
 
for (let i = 0; i <= 5; i++) { 
 
     
 
return (
 
    
 
<Image 
 
    
 
source={require('./Images/ballline.png')} 
 
    
 
style={styles.ballStyle} > 
 
    
 
<Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}> 
 
    
 
{this.state.display} 
 
    
 
</Text> 
 
    
 
</Image> 
 
    
 
); 
 
    
 
} 
 

 
}

內。然後使我這樣做：

<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}> 
 
    {this.displayBalls([0])} 
 
</View>

但問題是，只有1圖像被示出，但我需要顯示爲6圖像

我想在每次按下按鈕來更新狀態和存儲這些更新在這些圖像值其像 顯示數據的字段

對於我創建了一個狀態陣列

，但問題是我想顯示狀態的像的字段中的值：第一按鈕按更新在第一個字段中的狀態 然後在第二個按鈕上按下第二個字段中的更新狀態。

這是我的全碼：

export default class gameScore extends Component { 
 

 
state = { 
 
    totalruns: 0, 
 
    wickets: 0, 
 
    display: [], 
 
    Triggered: false 
 
} 
 

 

 
randomResultFunc() { 
 
result = (Math.floor(Math.random() * (15 - 0)) + 0); 
 
console.log('result----> ' + result); 
 
} 
 

 
checkResult() { 
 
console.log('checkResult'); 
 
    switch (result) { 
 

 
case 0: 
 
case 1: 
 
case 2: 
 
case 3: 
 
case 4: 
 
case 5: 
 
case 6: 
 
console.log('checkResult 6'); 
 
this.setState({ totalruns: this.state.totalruns += result, display: result }); 
 
break; 
 

 
case 7: 
 
console.log('checkResult 7'); 
 
this.setState({ totalruns: this.state.totalruns += 2, display: 2 }); 
 
break; 
 

 
case 8: 
 
console.log('checkResult 8'); 
 
this.setState({ totalruns: this.state.totalruns += 1, display: 1 }); 
 
break; 
 

 
case 9: 
 
console.log('checkResult 9'); 
 
this.setState({ totalruns: this.state.totalruns += 4, display: 4 }); 
 
break; 
 

 
case 10: 
 
console.log('checkResult 10'); 
 
this.setState({ totalruns: this.state.totalruns += 6, display: 6 }); 
 
break; 
 

 
case 11: 
 
case 12: 
 
case 13: 
 
case 14: 
 
case 15: 
 
console.log('checkResult 15'); 
 
this.setState({ wickets: this.state.wickets += 1, display: 'W' }); 
 
break; 
 

 
default: 
 
console.log('default'); 
 
break; 
 

 
    } 
 
} 
 

 
displayFunc() { 
 
    this.randomResultFunc(); 
 
    this.checkResult(); 
 
} 
 

 
displayBalls() { 
 

 
for (let i = 0; i <= 5; i++) { 
 
    return (
 
    <Image 
 
    source={require('./Images/ballline.png')} 
 
    style={styles.ballStyle} > 
 
    <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}> 
 
    {this.state.display} 
 
    </Text> 
 
    </Image> 
 
    ); 
 
    } 
 
} 
 
    render() { 
 
    console.log('State', this.state); 
 
    return (
 
<Image 
 
    source={require('./Images/bg_inner.png')} 
 
    style={styles.backgroundStyle}> 
 

 
<View style={{ marginTop: 100 }}> 
 
<Text style={styles.scoreStyle}> 
 
    {this.state.totalruns}{'/'}{this.state.wickets} 
 
</Text> 
 
</View> 
 

 
<View style={{ marginTop: 50 }}> 
 
<Button 
 
title='PRESS ME' 
 
onPress={() => { this.displayFunc(); }} /> 
 
</View> 
 

 
<View style={{ flexDirection: 'row', flex: 1, marginTop: 200 }}> 
 
    {this.displayBalls([0])} 
 
</View> 
 

 
</Image> 
 

 
    ); 
 
    } 
 
}

Answer 1

你能提供一些更多的信息？或完整的代碼？ （你說了一些按鈕，但我沒有看到任何按鈕或點擊處理程序..）

你在哪裏更新狀態？

加 - 在您的循環，你在第一次迭代返回單個項目，這意味着迴路只有一個迭代並返回一個單一的項目

UPDATE：

的幾件事這似乎導致您的代碼不工作 - 你有一些混亂，我覺得你的意思做類似的東西 -

randomResultFunc() { 
     return (Math.floor(Math.random() * (15 - 0)) + 0); 
    } 

displayFunc() { 
     const result = this.randomResultFunc(); 
     this.checkResult(result); 
    } 

在你displayBalls功能，您將始終顯示旁邊的每個球相同的文本（是你想要的嗎？），並且它可以顯示5個球就應該這樣寫這樣 -

displayBalls() { 

const balls = [] 
for (let i = 0; i <= 5; i++) { 
    balls.push(
    <Image 
     source={require('./Images/ballline.png')} 
     style={styles.ballStyle} > 
     <Text style={{ fontSize: 28, color: 'white', marginLeft: 8 }}> 
      {this.state.display} 
     </Text> 
    </Image> 
    ); 
    } 

return balls 
} 

*顯示初始定義爲數組，但你總是將其設置爲單個值..

**另一個一般說明 - 您應該真的將總運行值設置爲this.state.totalruns + result，而不是this.state.totalruns += result，因爲您不想直接修改狀態，而是使用setState函數

順便說一句 - 我不確定我是否完全遵循你的意圖，但我希望我能夠以某種方式幫助你..