Hey there! Let's work through why your form inputs aren't clearing after submission—this is a super common issue, but once we pinpoint the root cause, it's easy to fix. Let's break down possible scenarios and solutions based on the setup you're using:

1. If you're using a native React controlled form #

First, double-check that your inputs are properly bound to your component state. A lot of times, the issue comes from resetting the wrong state properties or not updating the state correctly:

• Make sure each input has a value prop tied to the correct state field (e.g., <input value={this.state.user.username} /> instead of just this.state.user if user is an object).
• When resetting, don't just set this.state.user to an empty string—if user is an object with multiple fields, reset each field explicitly:

  this.setState({
    user: {
      username: '',
      email: '',
      password: '' // include all your form fields here
    }
  });
  

• Ensure you're resetting the state after your submission logic completes (e.g., inside the .then() block if you're making an API call) so the reset doesn't happen before the submission finishes.

2. If you're using Ant Design's Form component #

Since you mentioned dispatch(reset('form')), I suspect you might be using Ant Design's Form (maybe with DVA or Redux). Here's how to get the reset working reliably:

• If you're using functional components, use the Form.useForm() hook to get the form instance, then call form.resetFields() directly after submission:

  import { Form, Button, Input } from 'antd';
  
  const RegisterForm = () => {
    const [form] = Form.useForm();
  
    const handleSubmit = () => {
      form.validateFields()
        .then(values => {
          // Run your submission logic here (API call, etc.)
          form.resetFields(); // This will clear all form fields
        })
        .catch(err => console.error('Validation failed:', err));
    };
  
    return (
      <Form form={form} onFinish={handleSubmit}>
        <Form.Item name="username" label="Username">
          <Input />
        </Form.Item>
        {/* Add other form fields with their own `name` props */}
        <Form.Item>
          <Button type="primary" htmlType="submit">Register</Button>
        </Form.Item>
      </Form>
    );
  };
  

• For class components using Form.create(), use this.props.form.resetFields() instead of relying on Redux dispatch—this is the direct, reliable way to reset Ant Design form fields.
• Critical: Every Form.Item must have a unique name prop. Without this, resetFields() can't target the fields to clear them.

3. If you're using Redux-Form #

If you're working with Redux-Form, ensure you're calling the reset action correctly:

• Make sure the form name you pass to reset('formName') matches the form prop on your Redux-Form component.
• You can also access the reset function directly from the props provided by Redux-Form and call it after submission:

  const handleSubmit = (values) => {
    // Submission logic
    this.props.reset();
  };
  

Common Pitfalls to Check #

• Non-controlled components: If your inputs use defaultValue instead of value, they're non-controlled. To clear these, you'll need to use a ref to directly manipulate the DOM:

  const inputRef = useRef(null);
  
  // After submission:
  inputRef.current.value = '';
  

• State lifting issues: If your form state is managed in a parent component, make sure you're updating the parent's state correctly—child components won't re-render unless the parent's state changes.
• Memoization blocking re-renders: If you're using React.memo or shouldComponentUpdate, ensure your form component isn't preventing re-renders when the state updates.

Example of a Working Native Controlled Form #

Here's a quick example to illustrate the correct state reset flow:

class RegisterForm extends React.Component {
  state = {
    user: {
      username: '',
      email: '',
      password: ''
    }
  };

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

  handleSubmit = (e) => {
    e.preventDefault();
    // Simulate API submission
    fetch('/api/register', {
      method: 'POST',
      body: JSON.stringify(this.state.user)
    })
    .then(res => res.json())
    .then(() => {
      // Reset all form fields
      this.setState({
        user: { username: '', email: '', password: '' }
      });
    })
    .catch(err => console.error('Submission failed:', err));
  };

  render() {
    const { user } = this.state;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="username"
          value={user.username}
          onChange={this.handleInputChange}
          placeholder="Username"
        />
        <input
          type="email"
          name="email"
          value={user.email}
          onChange={this.handleInputChange}
          placeholder="Email"
        />
        <input
          type="password"
          name="password"
          value={user.password}
          onChange={this.handleInputChange}
          placeholder="Password"
        />
        <button type="submit">Register</button>
      </form>
    );
  }
}

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