ReactJS问题：回调无法返回JSX？如何不提交错误字段渲染Snackbar

你一开始的问题确实是没有在render的返回值里渲染Snackbar——React组件只能通过render方法返回的内容来更新DOM，catch里直接返回<Snackbar>是不会被渲染到页面上的，这点你已经意识到啦。

针对你不想把error字段提交给服务器的需求，这里有几个可行的方案：

方案1：拆分表单状态和错误状态 #

最直接的方式就是把表单数据和错误信息分开存，这样提交的时候只传表单数据，完全不用管error字段：

class Login extends Component {
  state = {
    // 单独存表单数据
    formData: {
      email: '',
      password: ''
    },
    error: ''
  };

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.setState(prevState => ({
      formData: {
        ...prevState.formData,
        [name]: value
      }
    }));
  };

  handleSubmit = (event) => {
    event.preventDefault();
    // 只提交formData，不带error
    onFormSubmit(this.state.formData)
      .then(() => history.push('/teams'))
      .catch(e => this.setState({ error: e }));
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            name="email"
            value={this.state.formData.email}
            onChange={this.handleInputChange}
            placeholder="Email"
          />
          <input
            name="password"
            type="password"
            value={this.state.formData.password}
            onChange={this.handleInputChange}
            placeholder="Password"
          />
          <button type="submit">Login</button>
        </form>
        {/* 有错误时渲染Snackbar */}
        {this.state.error && <Snackbar message={this.state.error} />}
      </div>
    );
  }
}

方案2：提交时过滤掉error字段 #

如果你不想拆分state，也可以在提交的时候手动排除error字段，比如用对象解构：

handleSubmit = (event) => {
  event.preventDefault();
  // 解构出error，剩下的就是表单数据
  const { error, ...formData } = this.state;
  onFormSubmit(formData)
    .then(() => history.push('/teams'))
    .catch(e => this.setState({ error: e }));
};

或者用Object.fromEntries过滤：

const formData = Object.fromEntries(
  Object.entries(this.state).filter(([key]) => key !== 'error')
);

这样即使state里有error，提交给服务器的也只有邮箱和密码。

方案3：用Portal动态挂载Snackbar #

如果你不想在组件state里维护error，还可以用React Portal来动态创建和销毁Snackbar。这种方式不需要修改组件的state，直接在catch里渲染Snackbar到页面的某个节点：

import ReactDOM from 'react-dom';

handleSubmit = (event) => {
  event.preventDefault();
  onFormSubmit(this.state)
    .then(() => history.push('/teams'))
    .catch(e => {
      // 创建一个临时DOM节点
      const snackbarRoot = document.createElement('div');
      document.body.appendChild(snackbarRoot);

      // 渲染Snackbar
      ReactDOM.render(<Snackbar message={e} />, snackbarRoot);

      // 3秒后销毁Snackbar和DOM节点
      setTimeout(() => {
        ReactDOM.unmountComponentAtNode(snackbarRoot);
        document.body.removeChild(snackbarRoot);
      }, 3000);
    });
};

这种方式适合不需要持久化错误状态的场景，提示自动消失后就清理掉了。

方案4：全局状态管理（适合多组件场景） #

如果你的应用很多地方都需要显示Snackbar，可以用Context或者状态管理库（比如Redux、Zustand）来全局管理提示状态。比如用Context的例子：

首先创建一个SnackbarContext：

import { createContext, useContext, useState } from 'react';

const SnackbarContext = createContext();

export const SnackbarProvider = ({ children }) => {
  const [snackbar, setSnackbar] = useState({ show: false, message: '' });

  const showSnackbar = (message) => {
    setSnackbar({ show: true, message });
    setTimeout(() => setSnackbar({ show: false, message: '' }), 3000);
  };

  return (
    <SnackbarContext.Provider value={{ showSnackbar }}>
      {children}
      {snackbar.show && <Snackbar message={snackbar.message} />}
    </SnackbarContext.Provider>
  );
};

export const useSnackbar = () => useContext(SnackbarContext);

然后在Login组件里使用：

import { useSnackbar } from './SnackbarContext';

const Login = () => {
  const { showSnackbar } = useSnackbar();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onFormSubmit({ email, password })
      .then(() => history.push('/teams'))
      .catch(e => showSnackbar(e));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单内容 */}
    </form>
  );
};

这种方式让Snackbar的管理和组件解耦，不用每个组件都维护自己的error状态。

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