关于react antd 双向数据绑定Select组件渲染问题

双向数据绑定后,select变化都会触发table表格重新渲染,如何避免这个问题?
见代码https://codesandbox.io/s/epic-colden-oi3eu

{/*代码1*/}
{/* {getFieldDecorator('gender', {
  initialValue:"female",
  rules: [{ required: true, message: 'Please select your gender!' }],

})(
  ,
)} */}

 {/*代码2*/}
,

说明:代码1使用了双向数据绑定,当select变化时会自动渲染,控制台会输出两次“table表格被触发了”,如果使用代码2改变select时不会输出“table表格被触发了”。
问题:我现在需要再table里获取到gender的值,但不想表格被重新渲染!如果还是使用双向数据绑定该如何修改代码?如果不使用双向数据绑定该如何获取到gender的值,麻烦给出代码。

最佳答案

首先纠正的是, React没有双向绑定的概念, 这样只是受控表单.
再就是使用HOOK重写, 因为React类中比较复合类型数据很难.

import React, { useMemo } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Select, Input, Button, Card, Table } from 'antd';

const { Option } = Select;

const App = props => {
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  const handleSelectChange = value => {
    console.log(value);
    props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
    });
  };

  const { getFieldDecorator, getFieldValue } = props.form;
  const dataSource = useMemo(
    () => [
      {
        key: '1',
        name: '女',
        age: 32,
        address: '西湖区湖底公园1号'
      },
      {
        key: '2',
        name: '男',
        age: 42,
        address: '西湖区湖底公园1号'
      }
    ],
    []
  );
  const columns = useMemo(
    () => [
      {
        title: '性别',
        dataIndex: 'name',
        key: 'name',
        render: text => {
          console.log('table表格被触发了');
          return (
            // {getFieldValue('gender')}
            {text}
          );
        }
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age'
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address'
      }
    ],
    []
  );
  return (
    
      
{getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }] })()} {getFieldDecorator('gender', { initialValue: 'female', rules: [{ required: true, message: 'Please select your gender!' }] })( )}
); }; const MyTable = React.memo(props => ); const WrappedApp = Form.create({ name: 'coordinated' })(App); ReactDOM.render(, document.getElementById('container'));