每次击键都会重新渲染整个表格

Question

我为用户注册设置了一个复杂的表单，问题是整个表单都会在每个表单上重新呈现 击键

应用程序结构

我在下面以自上而下的方式给出了我的应用程序的体系结构

用户注册
包含单一真相来源的父组件具有对象形式的状态，它将输入值作为道具传递给其子对象

user:{
  number: '1234',
  firstName: 'Vaibhav',
  lastName: 'Shelke'
}

和它的孩子是

<UserDetails
              getUserDetails={(userDetails, errors) => {
                this.setState({
                  userDetails,
                  errors: errors || {},
                  isSubmitable:
                    countLeaves(errors) === 0 && countLeaves(userDetails) > 0
                });
              }}
              values={this.state.userDetails}
              errors={this.state.errors}
            />

用户详细信息
可重用的组件，其中包含基本值，例如firstName，lastName，number。该组件从其父（即UserRegistraion

）获取inputValues以及一个反映父组件中的更改的函数。

handleInput = (e, name) => {
    const { values, getUserDetails } = this.props;
    const userDetails = { ...values };
    if (e instanceof Date) {
      userDetails[name] = format('yyyy-MM-dd', e); // Date Input
    } else if (e) {
      userDetails[e.target.name] = e.target.value; // Text Input
    }
    getUserDetails(userDetails, validateUser(userDetails));
  };

TextInput
实际更改它的基本输入组件从其父（即）获取其值和处理程序。 UserDetails作为道具

const {
      label,
      name,
      onInputChange,
      icon,
      intent,
      helperText,
      labelInfo,
      value,
      type
    } = this.props;

    return (
      <FormGroup
        helperText={helperText}
        label={label}
        labelFor="text-input"
        labelInfo={labelInfo || ''}
      >
        <InputGroup
          type={type}
          intent={intent}
          leftIcon={icon}
          id={name}
          name={name}
          placeholder={label}
          onChange={e => onInputChange(e)}
          value={value || ''}
        />
      </FormGroup>
    );

  

以上所有组件都是基于类的组件

我已经尝试过使用shouldComponentUpdate（），但是仍然无法正常工作

我已在问题摘要中给出了代码