时间戳

首页 > 解决方案 > 如何将反应类转换为反应钩子（firebase 存储）

javascript - 如何将反应类转换为反应钩子（firebase 存储）

问题描述

我很难将反应类组件转换为钩子。自从我玩过 react 已经有一段时间了，所以我无法掌握它。

我的代码试图做的是上传图像并将其放入 firebase 存储并显示它。它适用于类组件，但我无法将它们转换为钩子。有人可以帮我吗？

import React, {Component} from 'react';
import fire from '../config/Fire';
import FileUploader from 'react-firebase-file-uploader';
import firebase from 'firebase';



class Fileupload extends Component {

  state = {
    image: '',
    imageURL: '',
    progress: 0
  }


  handleUploadStart = () => {

    this.setState({
      progress: 0
    })
  }

  handleUploadSuccess = filename => {
    this.setState ({
      image: filename,
      progress: 100
    })

    fire.storage().ref('avatars').child(filename).getDownloadURL()
    .then(url => this.setState({
      imageURL: url
    }))
  }



  render() {

    console.log("this.state", this.state)
    console.log("this.state.imageURL",this.state.imageURL)
  return (
    <div className="App">
      <h2>file upload and load</h2>

      <FileUploader  
      accept="image/*"
      name='image'
      storageRef={fire.storage().ref('avatars')}
      onUploadStart = {this.handleUploadStart}
      onUploadSuccess = {this.handleUploadSuccess}
      />
<div>
    <h4>show image</h4>
    <img src={this.state.imageURL} />

</div>


    </div>
  );
};
  }
export default Fileupload;

标签： javascriptreactjsfirebasefirebase-storage

解决方案

将类重构为钩子时要记住几件事。- 而不是Classusefunction()或 a () => arrow function，- 没有渲染函数，只有一个 return 语句， -this关键字仅用于将函数和状态绑定到Class. 这些不在函数中使用， - 而不是this.setState，您应该使用useState钩子。

import React, { useState } from 'react';
import fire from '../config/Fire';
import FileUploader from 'react-firebase-file-uploader';
import firebase from 'firebase';

function Fileupload() {
  const [image, setImage] = useState('');
  const [imageURL, setImageUrl] = useState('');
  const [progress, setProgress] = useState(0);

  const handleUploadStart = () => {
    setProgress(0);
  };

  const handleUploadSuccess = filename => {
    setImage(filename);
    setProgress(100);

    fire
      .storage()
      .ref('avatars')
      .child(filename)
      .getDownloadURL()
      .then(url => setImageUrl(url));
  };

  return (
    <div className="App">
      <h2>file upload and load</h2>

      <FileUploader
        accept="image/*"
        name="image"
        storageRef={fire.storage().ref('avatars')}
        onUploadStart={handleUploadStart}
        onUploadSuccess={handleUploadSuccess}
      />
      <div>
        <h4>show image</h4>
        <img src={imageURL} />
      </div>
    </div>
  );
}

export default Fileupload;

推荐阅读