我在理解代碼時遇到了一些麻煩。基本上，如果我這樣做：
<Text onPress={() => console.log('123')} >123</Text>
，然后我單擊文本，每次單擊都會記錄 123 次。
但我正在做一個撥號應用程式。基本上有一個組件 Tile（代表一個數字，也有次要選項（但稍后會處理））。因此，當我在 App.js 中包含我的（目前只有一個）Tile 時，我希望 onPress 事件呼叫更改當前撥打號碼狀態的函式。因此，如果用戶在“1”上單擊 3 次，我希望最終字串為 111。問題是，我可以看到該handleNumber()函式在運行代碼后被呼叫一次，并且在單擊數字后不再被呼叫，因此永遠不會改變狀態，不記錄任何東西。
App.js Tile 實作：
const [getNumber, setNumber] = useState();
const handleNumber = (newChar) => {
console.log(newChar);
setNumber(newChar);
}
<Tile onPress={() => handleNumber('1')} style={styles.tile} firstChar={'1'} secondChar={'?'}/>
瓷磚.js：
const Tile = (props) => {
return (
<TouchableOpacity onPress={props.onPress()}>
<View>
<Text style={styles.mainChar}>{props.firstChar}</Text>
{props.secondChar ? <Text style={styles.secondChar}>{props.secondChar}</Text> : null}
</View>
</TouchableOpacity>
)
}
還有一件事：
正如您在 App.js::handleNumber() 中看到的，當前的實作是錯誤的，因為最終數字始終只是新的單個數字，而不是將其附加到字串的末尾。但是如果我想做 smth like setNumber(getNumber newChar)，它會給出最大更新深度超出錯誤。
uj5u.com熱心網友回復：
這里的問題是您將onPress道具傳遞給TouchableOpacity. 見，你呼叫的props.onPress只是將它傳遞給組件，這將導致當組件渲染（或重新渲染）要執行的功能函式。
你應該很好，只要使用<TouchableOpacity onPress={props.onPress}>，然后setNumber(getNumber newChar)也會很好。
作為旁注，您可以使用'1'您希望作為初始值的字串 ( const [getNumber, setNumber] = useState('1'))來初始化您的 App.js 狀態，然后 Tile 組件可以getNumber直接接收。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/348737.html
標籤：反应原生