Estoy tratando de crear un controlador único para actualizar el estado. Por ahora tengo muchos controladores, uno para cada componente. Lo que estoy tratando de hacer es crear una función de cambio y un controlador para manejar todos los cambios de estado.
Aquí está la función de cambio, por ahora solo tiene un caso:
function liftingUpStateHandler(type, e, state){ switch(type){ case 'imageClickHandler': let array = state.bottomGalleryItems; const index = array.findIndex((object) => object.cardId === e); window.scrollTo({ top: 0, behavior: 'smooth' }); return ['items', [state.bottomGalleryItems[index]]] default: return null; } } export default liftingUpStateHandler;Y estoy tratando de crear un controlador en el archivo principal app.js:
stateHandler = (type, e) =>{ const result = liftingUpStateHandler(type, e); this.setState({result[1]: result[2]}) }Si esto funciona, puedo agregar casos a liftingUpStateHandler y actualizar el estado con un solo controlador.
(uno para gobernarlos a todos) :)
Lo que estoy tratando ahora es un montón de funciones como esta:
loaderScreenHandler = (e) => { this.setState({loader: e}) } modalCloseHandler = () =>{ this.setState({noexifdatafilenames: []}) } markerFlyerTo = (e) => { const index = (markerFlyerHandler(e, this.state)); this.setState({ activeCard: index }); } deleteItem = (e) => { const result = (deleteItemHandler(e, this.state)); this.setState({ items: result[0]}); this.setState({ activeCard: 0 }); }; changeActiveCardRight = () => { const result = (changeActiveCardRightHandler(this.state, 'right')); this.setState({ activeCard: result }); } changeActiveCardLeft = () => { const result = (changeActiveCardRightHandler(this.state)); this.setState({ activeCard: result}); } closeHandler = () => { this.setState({ fullScreen: false}) }... Pero estoy recibiendo un error:
Failed to compile ./src/App.js SyntaxError: C:\Users\Sławek\Desktop\dev\geolocapp\src\App.js: Unexpected token, expected "," (63:25) 61 | stateHandler = (type, e) =>{ 62 | const result = liftingUpStateHandler(type, e); > 63 | this.setState({result[1]: result[2]}) | ^ 64 | } 65 | 66 |¿Es esto posible? ¿O necesito adoptar un enfoque diferente como REDUX?
this.setState({result[1]: result[2]})Para hacer una propiedad de objeto calculada , debe usar corchetes alrededor de la clave:
this.setState({ [result[1]]: result[2] }) Además, creo que querías usar result[0] y result[1] , por lo que sería:
this.setState({ [result[0]]: result[1] })