React Native在狀態數組中添加新項目

Question

我有下面的代碼

import React, { Component } from "react";
import { SafeAreaView } from 'react-navigation'
import {Keyboard, Text, View, TextInput, TouchableWithoutFeedback, Alert, KeyboardAvoidingView, StyleSheet} from 'react-native';
import { Button } from 'react-native-elements';
import EditableTable from 'react-native-editable-table';

export default class CreateNoteScreen extends Component {


constructor(props){
    super(props)
    this.state = {
        NotesHeader : [
          {value: 'Expend', input: 'c1', width: 30, sortable: false, defaultSort: 'ASC',editable: true},
          {value: 'Value', input: 'c2', width: 20, sortable: false, editable: true}
        ],
        NotesValue: [
          [10, 'test'],
          [20, {value: 'Edit Me', editable: true}],
          [30, {value: 'Extra Editable Rows',editable:true}],
          [20, {value: 'Edit Me', editable: true}],
          [20, {value: 'Edit Me', editable: true}],
          [20, {value: 'Edit Me', editable: true}],
          [20, {value: 'Edit Me', editable: true}],
          [20, {value: 'Edit Me', editable: true}],
          [10, 'test'],
          ['', ''],
          ['', '']
        ]
    }
}
_addNewColumn = () =>{

  let newNotesvalues = this.state.NotesValue.map(function(item) {
    item = [...item,[ 
      '',
      {
      value: ' ',
      editable: true
    }]]
    return item;
  });

this.setState(prevState => ({
  NotesHeader: [...prevState.NotesHeader, {
    value: 'Value',
    input: 'c3',
    width: 20,
    sortable: false,
    editable: true
  }],
  NotesValue: newNotesvalues
}))


//   let newNotesvalues = this.state.NotesValue.map(function(item) {
//     item.push({value: ' ', editable: true})
//     return item;
// });
//  let newHeadervalues = this.state.NotesHeader.concat({value: 'Value', input: 'c3', width: 20, sortable: false, editable: true});
//  console.warn(newHeadervalues)
//  console.warn(newNotesvalues)
// this.setState(prevState => ({
//   NotesHeader: newHeadervalues,
//   NotesValue: newNotesvalues
// }))
  // this.setState(prevState => ({
  //   NotesHeader: newHeadervalues, //[...prevState.NotesHeader,this.state.NotesHeader.push({value: 'Value', input: 'c3', width: 20, sortable: false, editable: true})],
  //   NotesValue: newNotesvalues
  // }))

 // console.warn(this.state)
}
render(){
    return (
      <SafeAreaView style={styles.container}>
      <Button title="Add column" onPress={() => this._addNewColumn()} />
        <EditableTable
          columns ={ this.state.NotesHeader }
          values= {this.state.NotesValue}
          emptyRows={2}
          onCellChange={(value, column, row, unique_id) => {
            console.log(`Cell Change on Column: ${column} Row: ${row}
                        and unique_id: ${unique_id}`);
          }}
          onColumnChange={(value, oldVal, newVal) => {
            console.log(`Column Change. Old Value: ${oldVal} New Value: ${newVal}`)
          }}
          customStyles={{

          }}
          style={styles.table}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  table: {
    flex: 1,
    marginBottom: 30
  }
});

NoteHeader是表頭，NoteValue是表行

_addNewColumn我想在行中添加新列和空白值。

https://snack.expo.io/HkZmuoVLS

它的拋出錯誤，我嘗試了很少的變化，但沒有成功。

無法讀取未定義TypeError的屬性'hasOwnProperty'：在eval時無法讀取未定義的屬性'hasOwnProperty'（module：//react-native-editable-table.js：3：4930）

如果通過最佳方式進行引導，請幫助也將有所幫助

Answer 1

Array#push返回一個新的數組長度，然后嘗試通過擴展將其添加到NotesHeader 。 更改為此：

this.setState(prevState => ({
  NotesHeader: [...prevState.NotesHeader, {
    value: 'Value',
    input: 'c3',
    width: 20,
    sortable: false,
    editable: true
  }],
  NotesValue: newNotesvalues
}))

還可以在_addNewColumn使用數組擴展

_addNewColumn = () => {

  let newNotesvalues = this.state.NotesValue.map(function(item) {
    item = [...item, {
      value: ' ',
      editable: true
    }]
    return item;
  });
}