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”：无法读取未定义的属性“ 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;
  });
}

React Native在状态数组中添加新项目

1 个答案: