Javascript TypeError:undefined不是对象（正在计算'；buttonRows.map'；）

我正在尝试在React Native中创建计算器应用程序，出现以下错误： TypeError:undefined不是对象（正在计算“buttonRows.map”） 起初，我收到一条警告：“警告：函数作为React子函数无效。如果返回组件，可能会发生这种情况。” 而不是从呈现。或者您可能想调用此函数而不是返回它。%s

所以我把{this.renderButtons}改为{this.renderButtons（）}。之后，这就是我得到的错误TypeError:undefined不是一个对象（计算'buttonRows.map'）

这是我的密码：

import { StatusBar } from 'expo-status-bar';
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import InputNumberButton from './InputNumberButton'

const buttons = [
  ['CLEAR', 'DEL'],
  [7, 8, 9, '÷'],
  [4, 5, 6, 'x'],
  [1, 2, 3, '-']
  [0, '.', '=', '+']
];

export default class App extends Component {
  renderButtons() {
    let layouts = buttons.map((buttonRows, index) => {
      let rowItem = buttonRows.map((buttonItems, buttonIndex) => {
        return <InputNumberButton
          key={'btn-' + buttonIndex}/>
      });

      return <View style={styles.inputRow} key={'row-' + index}>{rowItem}</View>
    });

    return layouts
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.resultContainer}>
          <Text style={styles.resultText}>0</Text>

        </View>

        <View style={styles.inputContainer}>
          {this.renderButtons()}
        </View>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,

  },

  resultContainer: {
    flex: 2,
    backgroundColor: '#1c1c1c',
    justifyContent: 'center'
  },

  inputContainer: {
    flex: 8,
    backgroundColor: '#303030'
  },

  resultText: {
    color: 'white',
    fontSize: 80,
    fontWeight: 'bold',
    paddingTop: 80,
    padding: 20,
    textAlign: 'right'
  },

  inputRow: {
    flex: 1,
    flexDirection: 'row'
  }
});

从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图}；
从“./InputNumberButton”导入InputNumberButton
常量按钮=[
[“清除”、“删除”]，
[7, 8, 9, '÷'],
[4,5,6，'x']，
[1, 2, 3, '-']
[0, '.', '=', '+']
];
导出默认类应用程序扩展组件{
renderButtons（）{
让布局=按钮。地图（（按钮箭头，索引）=>{
让rowItem=buttonRows.map（（buttonItems，buttonIndex）=>{
返回
});
返回{rowItem}
});
返回布局
}
render（）{
返回(
0
{this.renderButtons（）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
结果容器：{
弹性：2，
背景颜色：“#1c1c”，
为内容辩护：“中心”
},
输入容器：{
弹性：8，
背景颜色：“#303030”
},
结果正文：{
颜色：'白色'，
尺寸：80，
fontWeight:'粗体'，
paddingTop:80，
填充：20，
text对齐：“右”
},
输入：{
弹性：1，
flexDirection:“行”
}
});