Javascript 以新形式反应更新状态

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

但是，我得到了一个

类型错误：this.setState不是一个函数

错误

我还试图更新输入的值，但没有成功。

document.getelementbyid（“图像”）.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

---

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

我猜这个问题来自于

这个。setState

只能在基于类的文本中使用组成部分。在函数组件中，如您所拥有的-

NewProjectDialog

，您可以使用

useState

钩子来创建状态和更新程序函数

useState

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

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

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

而不是

this.setState（{image:reader.result}）

您将修改如下：

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

请在此进一步阅读：

---

我希望这有帮助

谢谢你的回答！对不起，我是个新手，还不知道React的基本知识。你能告诉我全部密码吗？；）@HiroakiMachida您可以在

useStyles

之后添加

useState

，然后将

this.setState

片段替换为

setImage

。谢谢！更新了帖子。图像未存储在firebase中。看起来我需要将表单值链接到“books”状态？

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

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