Réagissez Js, Comment puis-je enregistrer plusieurs données dans onClick?

Question

J'ai table, qui est positionné par x valeur et la valeur y. Ces valeurs sont enregistrées dans la base de données. J'utilise réagissent dnd pour positionner ces table.

Ce que je suis en train de faire est maintenant enregistrer toutes les positions de tables en un clic. Pour ce faire, je fait le code comme ci-dessous ..

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>

Quand est monté composant, je reçois toutes les informations de la table en this.state.tables. Donc, avec fonction saveTables(), ce que je suis en train de faire est que par la cartographie this.state.tables actions d'expédition pour sauver la position de x et y pour chaque table. Cependant, il déclenche erreur TypeError: action is undefined

Est-il possible de le faire comme ci-dessus? ou existe-t-il d'autres approches pour sauvegarder toutes les données des tables en un clic?

Merci à l'avance ..

erreur --edit complète

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

Vous pouvez mapper toutes les données dont vous avez besoin pour enregistrer et puis envoyer une action (ce sera plus efficace que votre l'application n'exécutera la routine de rendu qu'une seule fois).

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 devrait alors être un tableau comme:

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

Bien sûr, vous devrez modifier l'action/réducteur pour faire face à un tableau de toutes les données.

En ce qui concerne l'action que vous devez fournir le code où l'erreur se produit (pas seulement la trace de la pile), mais il sera probablement difficile de savoir sans exemple en cours d'exécution.