如何在 class 组件中使用一些 React 库

Question

我想在 class 组件中使用 React hook 和 DropZone。 我应该怎么做？

错误

src/components/projects/CreateProject.js 第 19:14 行：无法在顶层调用 React Hook “useCallback”。 必须在 React function 组件或自定义 React Hook function react-hooks/rules-of-hooks Line 21:11 中调用 React Hooks：'setUploadfile' 未定义：React-undef Line D52:10 “无法定义”在 class 组件中调用。 React Hooks 必须在 React function 组件或自定义 React Hook function react-hooks/rules-of-hooks Line 53:7: 'onDrop' is not defined no-undef

搜索关键字以了解有关每个错误的更多信息。

class CreateProject extends Component {
    state = {
        title:'',
        content:'',
        uploadfile:'',
        setUploadfile:''
    }

    onDrop = useCallback((acceptedFiles) => {
      if (acceptedFiles.length > 0) {
          setUploadfile(acceptedFiles[0]);
      }
    }, []);

    
    handleChange = (e) =>{
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.createProject(this.state)
        this.props.history.push('/')
    }

    handleSubmitImg = (e) =>{
      e.preventDefault()
      //this.props.sampleteFunction()
    };

    

  render() {
   const maxSize = 3 * 1024 * 1024;
  const { acceptedFiles, getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
      onDrop,
      accept: 'image/png, image/jpeg, image/gif, image/jpg',
      minSize: 1,
      maxSize,
  });

    const {auth} = this.props

    if(!auth.uid) return <Redirect to="/signin" />
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">
                Create Project
            </h5>
            <div className="input-field">
                <label htmlFor="title">Title</label>
                <input type="text" id="title" onChange={this.handleChange}/>
            </div>

            <div className="input-field">
                <label htmlFor="content">Project Content</label>
                <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            </div>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </div>
        </form>
            <div {...getRootProps()}>
                <input {...getInputProps()} />
                <p>Click</p>
                {this.uploadfile ? <p>File you chose: {this.uploadfile.name}</p> : null}
            </div>
        </div>
    )
  }
}

const matchStateToProps = (state) => {
    return{
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        createProject: (project) => dispatch(createProject(project))
    }
}

export default connect(matchStateToProps, mapDispatchToProps)(CreateProject)

Answer 1

您不能在 class 组件内使用挂钩（例如useCallback或useDropzone ）。 它们必须在function 组件的主体内使用。

要使此代码正常工作，必须进行一些更改。 我假设您正在使用react-dropzone package。

1. 从您的 state 中删除setUploadfile

您正在尝试在 class 组件内执行useState模式。 class 组件只需要 state 声明和使用this.setState进行更新。

从 state 中删除setUploadfile 。 改用this.setState({ uploadfile: newValue }) 。

2.移除useCallback

钩子useCallback在 function 组件中使用，以优化性能并防止不必要的渲染（请参阅此处）。 您制作了 class 组件，因此无需对回调 function 使用记忆。

onDrop = acceptedFiles => {
  if (acceptedFiles.length > 0) {
    this.setState({ uploadfile: acceptedFiles[0] })
  }
}

3. 使用Dropzone组件而不是useDropzone hook

在react-dropzone的文档中，有一个useDropzone钩子的替代方法。 Dropzone组件。

删除useDropzone挂钩。

<Dropzone
  onDrop={this.onDrop}
  accept="image/png,image/jpeg,image/gif,image/jpg"
  minSize={1}
  maxSize={maxSize}
>
  {({ getRootProps, getInputProps }) => (
    <div className="container">{/* The rest of your code */}</div>
  )}
</Dropzone>

Answer 2

您不能在 Class 组件内使用反应挂钩，要么使用 class 或功能组件。

Answer 3

要在 class 组件中使用 useCallback，请使用bind(this)属性