React-Native-无法读取未定义的属性“0”答案

【问题标题】：React-Native- Cannot Read Property '0' of UndefinedReact-Native-无法读取未定义的属性“0”
【发布时间】：2019-09-27 16:56:55
【问题描述】：

我是 react-native 的新手。我正在通过一个教程构建一个计算器应用程序，我现在正试图设置它，按下一个计算器按钮将记录到该数字或符号的控制台。

当我按下计算器上的一个按钮时，如果我单击 1、4、7 按钮但对 2 也执行 1 和 2，我会在控制台“无法读取未定义的属性 '0'”中收到错误消息,5,8 和 3,6,9 按钮。我认为这意味着 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>
      );
   }
}

【问题讨论】：

标签： react-native react-native-ios

【解决方案1】：

使用ES6 格式。改变：

buttonPressed(text) {
    console.log(text)
}

到：

buttonPressed = (text) => {
    console.log(text)
}

【讨论】：

【解决方案2】：

解决此问题的更好方法是从渲染函数中删除逻辑。这在调试问题时会有所帮助。

rows/numbers 数组可以放在组件之外，因为它不会改变，所以每次调用组件render 函数时都不需要重新创建它。然后，您可以使用数组上的map 函数来呈现每一行和编号项目。这是使用 react 时的首选方法。

您可以尝试下面的代码，看看它是否有效。虽然您的 sn-p 中缺少一些代码。

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>
      );
   }
}

更好的方法是使用纯组件。然后如果你需要 state，你可以使用 react hooks。

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

【讨论】：