React-Native-无法读取未定义的属性“0”
React-Native-无法读取未定义的属性“0”
提问于 2019-05-10 03:38:09
我是第一次接触react-native。我正在通过一个教程构建一个计算器应用程序，我现在正在尝试设置它，按下其中一个计算器按钮将登录到控制台。
当我按下计算器上的一个按钮时，如果我点击1,4,7个按钮，我会在控制台收到一个错误'Cannot read property '0‘of undefined’，但对于2,5,8和3,6,9个按钮，1和2也是一样的。我认为这意味着无论出于什么原因，this.buttonPressed都不能处理我的水平数组，或者还有其他问题。
我尝试过在构造函数中使用以下命令绑定buttonPressed
this.buttonPressed = this.buttonPressed.bind(this)无济于事。
export default class App extends Component {
constructor(){
super()
this.state = {}
}
buttonPressed(text) {
console.log(text)
}
render() {
let rows = []
let nums = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
for(i=0; i<4; i++){
let row = []
for(let j=0; j<3; j++){
row.push(
<TouchableOpacity onPress={() => this.buttonPressed(nums[i]
[j])} style={styles.btn}>
<Text style={styles.btnText}>{nums[i][j]}</Text>
</TouchableOpacity>
)
}
rows.push(<View style={styles.row}>{row}</View>)
}
...
return (
<View style={styles.container}>
...
<View style={styles.buttons}>
<View style={styles.numbers}>
{rows}
</View>
</View>
</View>
);
}
}回答 2
Stack Overflow用户
发布于 2019-05-10 03:46:32
使用ES6格式。更改：
buttonPressed(text) {
console.log(text)
}至：
buttonPressed = (text) => {
console.log(text)
}Stack Overflow用户
发布于 2019-05-10 03:52:59
解决这个问题的一种更好的方法是从呈现函数中删除逻辑。这在调试问题时会有所帮助。
行/数字数组可以在组件外部获取，因为它不会更改，因此不需要在每次调用组件render函数时重新创建它。然后，您可以在数组上使用map函数来呈现每个行和数字项。这是使用react时的首选方法。
您可以尝试下面的代码，看看它是否工作。尽管您的代码片段中缺少一些代码。
const ROWS = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
export default class App extends Component {
buttonPressed(text) {
console.log(text)
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttons}>
<View style={styles.numbers}>
{ROWS.map(numbers => (
<View style={styles.row}>
{numbers.map(number => (
<TouchableOpacity style={styles.btn} onPress={() => this.buttonPressed(number)}>
<Text style={styles.btnText}>{number}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
</View>
</View>
);
}
}更好的方法是使用纯组件。如果你需要状态，你可以使用react钩子。
const ROWS = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
const App = () => {
const buttonPressed = (text) => {
console.log(text)
}
return (
<View style={styles.container}>
<View style={styles.buttons}>
<View style={styles.numbers}>
{ROWS.map(numbers => (
<View style={styles.row}>
{numbers.map(number => (
<TouchableOpacity style={styles.btn} onPress={() => buttonPressed(number)}>
<Text style={styles.btnText}>{number}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
</View>
</View>
);
}
export default App页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56066472
复制相关文章
相似问题