Приложение MobX перезагружается - PullRequest
Новая
       9

Приложение MobX перезагружается

0 голосов
/ 02 мая 2018

Я использую Mobx в качестве хранилища данных. Код, как показано ниже.

channelStore - содержит @ наблюдаемые каналы [], @action addChannel (chan)

Компонент channel.js имеет форму, когда отправленный вызывает channelStore.addChannel ().

Я вижу, что он успешно добавляет данные в channelStore, как они отражаются в пользовательском интерфейсе, однако приложение немедленно обновляется, и добавленный канал больше не доступен.

Понятия не имею почему !!!

Мое приложение создано, как показано ниже. create-react-app > eject > install babel plugin transform-decorators-legacy ("^1.3.4") > npm init > npm start

ЦСИ / хранилищу / channelstore.js 

import { observable, computed, action, extendObservable } from 'mobx';

class ChannelStore{
    @observable activeChannel = 'hello';
    @observable activeUser = 'anon';
    @observable channels = ['hello'];
    @observable users = [];
    @observable connected = false;

    @action setActiveChannel(channel){
        this.activeChannel = channel;
    }

    @action setActiveUser(user){
        this.activeUser = user;
    }

    @action addChannel(chan){
        console.log('Adding Channel '+chan)
        this.channels.push(chan)
        //this.channels[0] = chan;
    }

    @action addUser(user){
        this.users.push(user)
    }

    @action setConnectionStatus(status){
        this.connected = status;
    }
}

let channelStore = new ChannelStore()
export default channelStore;

SRC / компоненты / channel.js 

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

@inject('channelStore')     
@observer
class Channel extends Component {

    render() {
        const { channelStore } = this.props;
        const channels = channelStore.channels;
        const activeChannel = channelStore.activeChannel;

        console.log(channels);

        return (
            <div className=' panel panel-primary'>
                <div className='panel-heading'>
                    <strong>Channels</strong>
                </div>
                <div className='panel-body channels'>
                {
                    channels.map((chan, i)=>{
                        return (
                        <a key={i} onClick={(e)=>channelStore.setActiveChannel(chan)}>
                        {
                            (chan === activeChannel) ?
                                <li key={i} className='active'>{chan}</li>
                            :
                                <li key={i}>{chan}</li>
                        }
                        </a>
                        )
                    })
                }
                <form onSubmit={(e)=>channelStore.addChannel(this.refs.channelInput.value)}>
                    <div className='form-group'>
                        <input 
                            type='text' 
                            ref='channelInput'
                            className='form-control'
                            placeholder='Add Channel'
                        />
                    </div>
                </form>
                </div>
            </div>
        )
    }
}


export default Channel

ЦСИ / App.js 

import { Provider } from "mobx-react";
import channelStore from './datastore/channelstore';
import Channels from './components/channel';

..
 <Provider channelStore={channelStore}>
            <div className="app">
                <div className="container">
                    <div className="row">
                        <div className="col-md-4">
                            <Channels />
                            <Users />
                        </div>

                        <div className="col-md-8">
                            <MessageBox />
                        </div>
                    </div>
                </div>
            </div>
        </Provider>

1 Ответ

0 голосов
/ 02 мая 2018

Как вы сказали в своем комментарии, и поскольку ваш якорный элемент <a> не имеет тега href, я думаю, что вы говорите о onSubmit в форме.

onSubmit вызывается браузером перед отправкой формы на сервер (по URL-адресу, определенному в атрибуте action, и методу http, определенному в атрибуте method.

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

Лучшая практика - это делать это как первое действие в вашем слушателе. потому что, если есть что-то, что выдает исключение, preventDefault() не будет вызвано (если оно будет дальше по функции), и, таким образом, форма будет отправлена, и страница перезагрузится.

другое решение

другим решением было бы вообще не запускать отправку, а при нажатии кнопки вручную обрабатывать действие сохранения. Поэтому убедитесь, что кнопка «Отправить» отсутствует.

...