React Js, как я могу сохранить несколько данных в onClick?

Question

Я имею table, который позиционируется x значение и y значение. Эти значения сохраняются в базе данных. Я использую реагировать и позиционировать их table,

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

constructor() {
 super();
 this.state = {
   tables: []
 }}

saveTables() {
 const { state, dispatch, tables } = this.props;
 this.state.tables.map((table) => {
  const data ={
    id: table.id,
    x: table.x,
    y: table.y,
  }
  dispatch(Actions.save(this.props.tables.channel, data));
 })
}

<button onClick={this.saveTables}>Save</button>

Поэтому, когда компонент смонтирован, я получаю всю информацию о таблице в this.state.tables, Так с saveTables() функция, что я пытаюсь сделать, это путем отображения this.state.tables диспетчерские действия для сохранения позиции x а также y для каждого стола. Тем не менее, это вызывает ошибку, которая TypeError: action is undefined

Возможно ли сделать это как выше? или есть ли другие подходы для сохранения всех данных таблиц в один клик?

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

- Редактировать полную ошибку

TypeError: action is undefined[Learn More] app.js:54241:1 routerMiddleware/</</< http://localhost:4000/js/app.js:54241:1 saveTables/< http://localhost:4000/js/app.js:73190:9 map self-hosted saveTables http://localhost:4000/js/app.js:73184:7 bound saveTables self-hosted bound bound saveTables self-hosted ReactErrorUtils.invokeGuardedCallback http://localhost:4000/js/app.js:45316:7 executeDispatch http://localhost:4000/js/app.js:39166:5 executeDispatchesInOrder http://localhost:4000/js/app.js:39189:5 executeDispatchesAndRelease http://localhost:4000/js/app.js:38581:5 executeDispatchesAndReleaseTopLevel http://localhost:4000/js/app.js:38592:10 forEach self-hosted forEachAccumulated http://localhost:4000/js/app.js:50930:5 EventPluginHub.processEventQueue http://localhost:4000/js/app.js:38795:7 runEventQueueInBatch http://localhost:4000/js/app.js:45345:3 ReactEventEmitterMixin.handleTopLevel http://localhost:4000/js/app.js:45356:5 handleTopLevelImpl http://localhost:4000/js/app.js:45438:5 TransactionImpl.perform http://localhost:4000/js/app.js:50185:13 ReactDefaultBatchingStrategy.batchedUpdates http://localhost:4000/js/app.js:45084:14 batchedUpdates http://localhost:4000/js/app.js:48223:10 ReactEventListener.dispatchEvent http://localhost:4000/js/app.js:45513:7 bound

Answer 1

Вы можете отобразить все данные, которые нужно сохранить, и затем отправить действие (это будет более эффективно, поскольку ваше приложение будет запускать процедуру рендеринга только один раз).

saveTables() {
  const { dispatch, tables } = this.props;
  const tableData = tables.map(table => ({
    id: table.id,
    x: table.x,
    y: table.y,
  });
  dispatch(Actions.save(tables.channel, tableData));
}

tableData должен быть массивом вроде:

[{id, x, y}, {id, x, y} ...]

Конечно, вам придется изменить действие / редуктор, чтобы иметь дело с массивом всех данных.

Что касается действия, вам нужно предоставить код, в котором происходит ошибка (а не только трассировка стека), но, вероятно, будет сложно узнать без работающего примера.