React-Native - не может прочитать свойство '0' из неопределенного

Question

Я новичок в реакции-родной. Я создаю приложение калькулятора с помощью учебника, где я сейчас нахожусь в точке, где я пытаюсь настроить его, где нажатие одной из кнопок калькулятора приведет к выводу на консоль этой цифры или символа.

Когда я нажимаю одну из кнопок на калькуляторе, я получаю сообщение об ошибке в консоли «Невозможно прочитать свойство« 0 »неопределенного», если я нажимаю кнопки 1,4,7, но также выполняет 1 и 2 для 2 5,8 и 3,6,9 кнопок соответственно. Я полагаю, это означает, что this.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

Лучшим способом решения этой проблемы было бы удаление логики из функции рендеринга.Это поможет при отладке проблемы.

Массив строк / чисел может быть взят за пределы компонента, так как он не изменится, поэтому нет необходимости создавать его заново каждый раз, когда вызывается функция компонента render.Затем вы можете использовать функцию map в массиве для отображения каждой строки и числового элемента.Это предпочтительный подход при работе с реагировать.

Вы можете попробовать код ниже и посмотреть, работает ли он.Хотя в вашем фрагменте отсутствует некоторый код.

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

Еще лучший подход - использовать чистый компонент.Тогда, если вам нужно состояние, вы можете использовать реакционные хуки.

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

Answer 2

Использовать ES6 формат.изменить:

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

на:

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