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

我想在类组件中使用React钩子和DropZone。 我该怎么办

错误

src/components/projects/CreateProject.js 第19:14行：不能在顶层调用React钩子“useCallback”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用React钩子 第21:11行：“setUploadfile”未定义无未定义 第52:102行：不能在类组件中调用React钩子“useDropzone”。必须在React函数组件或自定义React钩子函数React钩子/钩子规则中调用React钩子 第53:7行：“onDrop”未定义无未定义

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

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)

类CreateProject扩展组件{
状态={
标题：“”，
内容：“”，
上载文件：“”，
setUploadfile:“”
}
onDrop=useCallback（（acceptedFiles）=>{
如果（acceptedFiles.length>0）{
setUploadfile（acceptedFiles[0]）；
}
}, []);
handleChange=（e）=>{
这是我的国家({
[e.target.id]：e.target.value
})
}
handleSubmit=（e）=>{
e、 预防默认值（）；
this.props.createProject（this.state）
this.props.history.push（“/”）
}
handleSubmitImg=（e）=>{
e、 预防默认值（）
//this.props.sampleteFunction（）
};
render（）{
常量maxSize=3*1024*1024；
const{acceptedFiles，getRootProps，getInputProps，isDragActive，isDragReject，fileRejections}=useDropzone({
昂德罗普，
接受：“image/png，image/jpeg，image/gif，image/jpg”，
minSize:1，
最大尺寸，
});
const{auth}=this.props
如果（！auth.uid）返回
返回(
创建项目
标题
项目内容
创造
点击

{this.uploadfile？您选择的文件：{this.uploadfile.name}
：null}
)
}
}
常量matchStateToProps=（状态）=>{
返回{
auth:state.firebase.auth
}
}
const mapDispatchToProps=（调度）=>{
返回{
createProject：（项目）=>调度（createProject（项目））
}
}
导出默认连接（MatchStateTrops、mapDispatchToProps）（CreateProject）

您不能在类组件内使用react钩子，也不能在类组件内使用Class或functional组件。

要在类组件内使用useCallback，请在类组件内使用

绑定（this）

属性

您不能使用钩子（例如

useCallback

或

useDropzone

）。它们必须用在机器人体内

要使此代码正常工作，必须进行一些更改。我猜想你在用这个包裹

1.从您的状态中删除

setUploadfile

您正试图在类组件中执行

useState

模式。类组件只需要状态声明和使用

this.setState

进行更新

从您的状态中删除

setUploadfile

。改用

this.setState（{uploadfile:newValue}）

2.删除

useCallback

钩子

useCallback

用于函数组件内部，以优化性能并防止不必要的渲染（）。您创建了一个类组件，因此无需对回调函数使用memonization

onDrop=acceptedFiles=>{
如果（acceptedFiles.length>0）{
this.setState（{uploadfile:acceptedFiles[0]}）
}
}

3.使用

Dropzone

组件，而不是

useDropzone

hook 在

react dropzone

的文档中，有一个

useDropzone

hook的替代选项。组件

卸下

useDropzone

挂钩

{（{getRootProps，getInputProps}）=>(
{/*剩下的代码*/}
)}

作为功能组件重写是可行的答案吗？绝对不是。我想在类组件中使用dropzone。你的回答令人叹为观止。谢谢。实际上，你不能在函数组件的主体之外使用任何钩子。看。