Material-Table не добавит строку

#javascript #reactjs #material-ui #material-table

#javascript #reactjs #материал-пользовательский интерфейс #material-table

Вопрос:

Довольно новичок в JS, реагирует. Попытка использовать Material-table с помощью кнопки добавления строки. Добавление строки не добавит строку. При обновлении строки сбрасываются. Я почти уверен, что делаю что-то не так с настройкой / обновлением состояния.

 export default function App() {
  return (
    <div className="App">
      <Tabl
        obj={{
          a: "a",
          items: [{ x: 1 }, { x: 2 }, { x: 3 }]
        }}
      />
    </div>
  );
}

 class Tabl extends Component {
  constructor(props) {
    super(props);
    this.state = {
      obj: props.obj
    };
    console.log(JSON.stringify(this.state.obj));
  }

  updateState(newData) {
    this.setState({
      obj: [...this.state.obj.items, newData]
    });
  }

  render() {
    const currObj = this.state.obj;
    const column = [
      {
        title: "a",
        field: "x"
      }
    ];

    const tableIcons = {
      Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
      Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
      Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />)
    };

    return (
      <MaterialTable
        data={currObj.items}
        columns={column}
        icons={tableIcons}
        options={{
          search: false,
          paging: false
        }}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                this.updateState(newData);
                resolve();
              }, 1000);
            })
        }}
      />
    );
  }
}
export default Tabl;

Заранее спасибо.

Ответ №1:

метод this.updateState не привязан к классу.

Вы можете привязать конструктор следующим образом,

 constructor(props) {
    super(props);
    this.state = {
      obj: props.obj
    };
    console.log(JSON.stringify(this.state.obj));
    this.updateState= this.updateState.bind(this);
  }

1. Ваша модель состояния — {a: ‘..’, items: […] }, и вы пытаетесь изменить obj: […this.state.items, newData] . Возможно, это могло бы сработать следующим образом -> obj : {…this.state.obj, items: […this.state.items, newData]}

2. Спасибо за подсказку. obj: { ...this.state.obj, items: [...this.state.obj.items, newData] } сработало.