无法在 useEffect 挂钩中使用反应表单数据

Unable to use react form data in useEffect hook

我有一个 antd 表单,我可以在点击提交按钮后在 onFinish function 中获取表单数据,我想在其中使用 uesEffect hook并将表单数据作为有效负载发送到 redux saga,但我收到以下错误

React Hook "useEffect" is called in function "onFinish" that is neither a React function component nor a custom React Hook function.

如果我在 onFinsh 函数之外编写 useEffect 钩子,我将无法获得 data/values

的形式

请提出一种解决方法,以在 onFinish 函数之外获取表单数据值


import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox } from 'antd';
 

const Demo = () => {
  const onFinish = (values) => {
    // alert(JSON.stringify(values['username']));
    useEffect(() => {
      // dispatch an action with values as payload
     }, []);
  };
console.log(values) // UNABLE TO GET VALUES HERE...HOW TO GET IT???
  return (
    <Form
      name="basic"
      onFinish={onFinish}>
      <Form.Item
        label="Username"
        name="username">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

useEffect 只能在组件的顶层调用,不能在函数内调用。在这种情况下,您不需要 useEffect 来分派操作,而是可以直接在 onFinish 中这样做。

看来您甚至不需要 useEffect() 挂钩。只需从 onFinish() 中发送操作并让状态存储 values

const Demo = () => {

  const [ values, setValues ] = useState([]);
  
  const onFinish = (recievedValues) => {
    // dispatch here
    setValues(recievedValues);
  }
  
  console.log(values) // <-- you can get it here
  return (<div> ... </div>);
};

或者更好的是,由于您已经在调度期间将值保存在 redux 中,因此您也应该在渲染代码中使用它:

import { useSelector } from 'react-redux';

const Demo = () => {

  //point to the state where your data is
  const stateValues = useSelector(state => state.your.data);
  
  const onFinish = (recievedValues) => {
    // dispatch here
  }
  
  console.log(stateValues) // <-- you can get it here
  return (<div> ... </div>);
};