在StrictMode中不推荐使用findDOMNode。 findDOMNode传递了StrictMode

Question

我正在使用react-hook-form，因为它便于应用字段验证。当我在材质UI中使用表单时，它警告我 ” findDOMNode在StrictMode中已弃用。findDOMNode传递了StrictMode内部的Transition实例。相反，将ref直接添加到您想要的元素中参考。” 。请让我知道如何摆脱此警告，因为我无法继续执行此警告。目前，表单行为符合预期，但在警告中明确提到它将在以后的版本中不可用。尝试引用现有问题，但未解决我的问题。下面是我的代码

SearchComponent.jsx

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';


export default function FormDialog(props) {
      const [open, setOpen] = React.useState(false);
    
      const handleClickOpen = () => {
        setOpen(true);
      };
    
      const handleClose = () => {
        setOpen(false);
      };

      const validateProcessName = (value) => {
        let data = props.processNameList
        if (data.includes(value.toLowerCase())) {
          return false;
        }
        return true;
      };
    
    
      return (
        <div>
          <Button variant="outlined" color="primary" onClick={handleClickOpen}>
            Open form dialog
          </Button>
          <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
          <form onSubmit={props.handleSubmit(props.onSubmit)}>
            <DialogTitle id="form-dialog-title">Create Process</DialogTitle>
            <DialogContent>
            <TextField
                autoFocus
                margin="dense"
                name="processName"
                label="Process Name"
                variant="outlined"
                required={true}
                inputRef={props.register({
                  required: true,
                  maxLength: 50,
                  minLength: 5,
                  validate: validateProcessName
                })}
                fullWidth
              />
                {props.errors.processName &&
                    props.errors.processName.type === "minLength" && (
                      <span className="error">
                        This field require min length of 5
                      </span>
                    )}
                  {props.errors.processName &&
                    props.errors.processName.type === "validate" && (
                      <span className="error">Process Name already exists</span>
                    )}
            <TextField
                margin="dense"
                name="processDescription"
                label="Process Description"
                variant="outlined"
                inputRef={props.register({ required: true, maxLength: 200 })}
                multiline
                rows={4}
                rowsMax={20}
                required={true}
                fullWidth
              />
                {/* {props.errors.processDescription && (
                    <span className="error">This field is required</span>
                  )} */}
            </DialogContent>
            <DialogActions>
              <Button onClick={handleClose} color="primary">
                Cancel
              </Button>
              <Button type="submit" color="primary">
                Subscribe
              </Button>
            </DialogActions>
            </form>
          </Dialog>
        </div>

      );
    }

searchContainer.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import FormDialog from '../Component/searchComponent.jsx'
import {useForm} from 'react-hook-form'


function SearchContainer() {
    const [processNameList, setprocessNameList] = useState([])
    const [isError, setIsError] = useState(false)
    const [isLoading, setIsLoading] = useState(false)
    const [postApiData, setApiData] = useState({})
    const [isSuccess, setIsSuccess] = useState(false)
    const {register, handleSubmit, errors} = useForm()

    useEffect( () =>{
        setIsLoading(true)
        setIsError(false)
        axios.get('api url')
        .then(respnose => {setprocessNameList(respnose.data.data)
        console.log(respnose.data)
        })
        .catch(e => setIsError(true)) 
        setIsLoading(false)
        }
        ,
        [isLoading])



    
    function postData (param){
        var new_param = JSON.stringify(param)
           axios.post('api url',new_param)
               .then(response => {
                   setApiData(response.data.data)
                   setIsSuccess(response.data.isSuccess)

             })
             .catch(e => {
               setIsError(true)
             })
           }

    const sendRequest= (data) => {
        let prm ={"ProcessName":data.processName,"ProcessDescription":data.processDescription,"Code":"null", "CreatedBy":"null"}
        postData(prm)
      }    

    return (
        <div>
            <FormDialog 
                processNameList={processNameList}
                register={register} 
                handleSubmit={handleSubmit} 
                errors={errors}
                onSubmit={sendRequest}/>
        </div>
    )
}

export default SearchContainer