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

Question

我有一个 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'));

Answer 1

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

Answer 2

看来您甚至不需要 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>);
};

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

Unable to use react form data in useEffect hook

reactjs

redux

antd

redux-saga

react-forms