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

Question

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

错误

src/components/projects/CreateProject.js Line 19:14: React Hook "useCallback" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 21:11: 'setUploadfile' is not defined no-undef Line 52:102: React Hook "useDropzone" cannot be called in a class component. React Hooks must be called in a React function component or a custom 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 组件内使用 React 挂钩，使用 class 或功能组件。

Answer 2

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

Answer 3

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

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

1。从你的州

中删除setUploadfile

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

从您所在的州删除 setUploadfile。请改用 this.setState({ uploadfile: newValue })。

2。删除 useCallback

钩子 useCallback 用于函数组件内部以优化性能并防止不必要的渲染 (see here)。您制作了一个 class 组件，因此无需为回调函数使用记忆。

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

3。使用 Dropzone 组件而不是 useDropzone 钩子

在 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>