Question

我是本机反应的新手。我正在通过一个教程构建一个计算器应用程序，现在我正在尝试将其设置为在其中按下计算器按钮之一将在控制台上记录该数字或符号的地方。

当我按下计算器上的一个按钮时，如果我单击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>
      );
   }
}

Answer 1

使用> for(i in modelt1){print(modelt1)}格式。更改：

ES6

至：

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

Answer 2

解决此问题的更好方法是从渲染函数中删除逻辑。这将有助于调试问题。

由于行/数字数组不会更改，因此可以将其移到组件之外，因此无需在每次调用组件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

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

2 个答案: