MobX应用调用addChannel后自动刷新，新增数据丢失问题求助

看起来你遇到的是个很典型的小坑——表单提交的默认行为触发了页面刷新，把MobX存在内存里的状态直接清空了！别着急，咱们一步步搞定它：

核心解决方案：阻止表单提交的默认行为 #

在你的channel.js组件中，处理表单提交的函数里，必须先调用event.preventDefault()来阻断浏览器的默认刷新动作。给你两个常见场景的示例：

类组件写法示例 #

import React, { Component } from 'react';
import channelStore from './your-channelStore-path';

class ChannelForm extends Component {
  handleSubmit = (event) => {
    // 关键步骤：先阻止表单默认提交行为
    event.preventDefault();
    
    // 组装要添加的频道数据
    const newChannel = { 
      name: event.target.channelName.value,
      // 其他频道字段...
    };
    // 调用MobX的addChannel方法
    channelStore.addChannel(newChannel);
    
    // 可选：提交后清空表单输入
    event.target.reset();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="channelName" placeholder="输入频道名称" />
        <button type="submit">添加频道</button>
      </form>
    );
  }
}

函数组件写法示例 #

如果用的是函数组件，逻辑完全一致：

import React from 'react';
import channelStore from './your-channelStore-path';

const ChannelForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault(); // 这行是重中之重！
    const newChannel = { 
      name: event.target.channelName.value,
      // 其他频道字段...
    };
    channelStore.addChannel(newChannel);
    event.target.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="channelName" placeholder="输入频道名称" />
      <button type="submit">添加频道</button>
    </form>
  );
};

问题根源解析 #

原生HTML的<form>标签在触发submit事件时，默认会向服务器发送请求并刷新整个页面。而你的MobX状态是存储在浏览器内存中的，页面一刷新，所有内存中的状态都会被重置——不是MobX没把数据加上，是页面刷新把状态直接清掉了。

额外检查点 #

• 确认你的按钮type是submit吗？如果是button类型，默认不会触发表单提交，但如果是submit，就必须阻止默认行为。
• 排查下有没有其他代码意外触发了页面跳转（比如window.location.reload()或者错误的路由操作），不过从你的描述来看，大概率就是表单默认行为搞的鬼。

按照这个方法修改后，新增的频道应该就能稳定保留在UI里啦！

内容的提问来源于stack exchange，提问作者uma mahesh