Question

如何以新形式更新状态？我想在上传图片时将其转换为base64，然后将其推送到firebase。

但是，我遇到了TypeError: this.setState is not a function错误。

我也尝试更新输入的值，但是没有用。 document.getelementbyid("image").value = reader.result

谢谢！

import React from 'react'
import PropTypes from 'prop-types'
import { Formik, Field, Form } from 'formik'
import { TextField } from 'formik-material-ui'
import { makeStyles } from '@material-ui/core/styles'
import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import DialogTitle from '@material-ui/core/DialogTitle'
import DialogActions from '@material-ui/core/DialogActions'
import DialogContent from '@material-ui/core/DialogContent'
import styles from './NewProjectDialog.styles'

const useStyles = makeStyles(styles)

function NewProjectDialog({ onSubmit, open, onRequestClose }) {
  const classes = useStyles()

  function handleSubmit(values, { setSubmitting }) {
    return onSubmit(values).then(() => {
      setSubmitting(false)
    })
  }

  function previewFile() {
    const preview = document.querySelector('img');
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function () {
      // convert image file to base64 string
      preview.src = reader.result;
      this.setState({image: reader.result})
    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }

    this.previewFile = this.preview.bind(this)
  }

  return (
    <Dialog open={open} onClose={onRequestClose}>
      <DialogTitle id="new-project-dialog-title">New Project</DialogTitle>
      <Formik initialValues={{ name: '' }} onSubmit={handleSubmit}>
        {({ errors, isSubmitting }) => (
          <Form className={classes.root}>
            <DialogContent>
              <Field
                name="isbn"
                label="ISBN"
                component={TextField}
                margin="normal"
                fullWidth
              />
              <Field
                name="title"
                label="Title"
                component={TextField}
                margin="normal"
                fullWidth
              />
              <Field
                name="status"
                label="Status"
                component={TextField}
                margin="normal"
                fullWidth
              />
              <Field
                name="price"
                label="Price"
                component={TextField}
                margin="normal"
                fullWidth
              />
              <Field
                id="image"
                name="image"
                component={TextField}
                style={{display:"none"}}
              />
              <input type="file" onChange={previewFile}/>
              <img src="" height="200" alt="Image preview..."></img>
            </DialogContent>
            <DialogActions>
              <Button onClick={onRequestClose} color="secondary">
                Cancel
              </Button>
              <Button type="submit" color="primary" disabled={isSubmitting}>
                {isSubmitting ? 'Creating...' : 'Create'}
              </Button>
            </DialogActions>
          </Form>
        )}
      </Formik>
    </Dialog>
  )
}

NewProjectDialog.propTypes = {
  onSubmit: PropTypes.func.isRequired,
  open: PropTypes.bool.isRequired,
  onRequestClose: PropTypes.func.isRequired
}

export default NewProjectDialog

我修改了代码，但图像未存储在Firebase中...

function NewProjectDialog({ onSubmit, open, onRequestClose }) {
  const classes = useStyles()
  const [image, setImage] = useState({image: null});

(Omitted)

  function previewFile() {
    const preview = document.querySelector('img');
    const file = document.querySelector('input[type=file]').files[0];
    const reader = new FileReader();

    reader.addEventListener("load", function () {
      // convert image file to base64 string
      preview.src = reader.result;
      setImage({image: reader.result});
    }, false);

    if (file) {
      reader.readAsDataURL(file);
    }

  }

-M0EVfPfzF1vjQ4wLXLU
createdAt: 1581881931504
createdBy: "YcGWgfdbk2hs8CcWSdtsicYncyB3"
isbn: "asdfa"
name: ""
price: "asdfasd"
status: "asfdasfd"
title: "asfdasfd"

无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本无意义文本文本无意义的文本无意义的文本无意义的文本无意义的文本无意义的文本无意义的文本无意义的文本无意义的文本无意义的文本

Answer 1

我想这个问题来自this.setState，它只能在基于类的组件中使用。在像您拥有的功能组件-NewProjectDialog中，您可以使用useState钩子在其中创建状态和更新程序函数。

useState返回什么？它返回一对值：当前状态和更新状态的函数。

因此您可以将状态定义为：

const [image, setImage] = useState({image: null});

您将修改为以下内容，而不是this.setState({image: reader.result})：

// updating value
setImage({image: reader.result});

在此处进一步阅读：Using the State Hook

希望对您有帮助！

以新形式反应更新状态

1 个答案: