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

Question

У меня есть table, который позиционируется по значению x и y. Эти значения сохраняются в базе данных. Я использую реакцию dnd для позиционирования этих 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

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

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

--edit полной ошибки

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} ...] 

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

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