Javascript 使用axios使用不工作的服务

我试图使用S3服务上传一个图像，它告诉我某些变量在我定义它们时没有定义。我已经进口了axios和所有其他需要的东西

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import TextField from "@material-ui/core/TextField";
import CreateIcon from "@material-ui/icons/Create";
import Box from "@material-ui/core/Box";
import CardMedia from "@material-ui/core/CardMedia";
import MuiAlert from "@material-ui/lab/Alert";
import Snackbar from "@material-ui/core/Snackbar";
import { withStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import Chip from "@material-ui/core/Chip";
import Avatar from "@material-ui/core/Avatar";
import Slider from "@material-ui/core/Slider";
import Typography from "@material-ui/core/Typography";
import InputAdornment from "@material-ui/core/InputAdornment";
import { connect } from "react-redux";
function mapStateToProps(state) {
  return {};
}

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(15),
    },
  },
  input: {
    display: "none",
  },
}));

const useSliderStyles = makeStyles({
  root: {
    width: 250,
  },
  input: {
    width: 100,
  },
});

const UploadButton = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <input
        accept='image/*'
        className={classes.input}
        id='contained-button-file'
        multiple
        type='file'
      />
      <label htmlFor='contained-button-file'>
        <Button variant='contained' color='primary' component='span'>
          Upload
        </Button>
      </label>
    </div>
  );
};
const StyledCard = withStyles({
  root: { height: 600, width: 350 },
})(Card);

const PetitionForm = () => {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [open, setOpen] = useState(false);
  const [petition, validPetition] = useState(false);
  const [noTitle, titleError] = useState(false);
  const [noDescription, descriptionError] = useState(false);
  const [hashtag, setHashtag] = useState("");
  const [arrayOfHashtags, addHashtag] = useState([]);
  const [money, setMoney] = React.useState(500);

  const slider = useSliderStyles();

  const handleTitleChange = (event) => setTitle(event.target.value);

  const handleDescriptionChange = (event) => setDescription(event.target.value);

  const handleClose = (event, reason) => {
    if (reason === "clickaway") {
      return;
    }
  };

  const Alert = (props) => (
    <MuiAlert elevation={6} variant='filled' {...props} />
  );

  const clearField = (event) => {
    setOpen(true);
    if (title.length > 0 && description.length > 0) {
      validPetition(true);
      setTitle("");
      setDescription("");
      addHashtag([]);
      setHashtag("");
      axios({
        url: `call/s3/backend`,
        method: "post",
        data: {
          images: imageArray.toByteArray(),
        },
      })
        .then((res) => {
          imageUrlArr = res.data;
          axios({
            url: `api/petition_posts`,
            method: "post",
            data: {
              petition_post: {
                title: title,
                description: description,
                hashtags: arrayOfHashtags.join(" "),
                amount_donated: 0,
                media: imageUrlArr,
                goal: money,
                card_type: "petition",
                org_profile_id: 1,
              },
            },
          })
            .then((res) => {
              console.log(res.data);
            })
            .catch((error) => console.log(error));
        })
        .catch((error) => console.log(error));
    }
    titleError(true ? title.length === 0 : false);
    descriptionError(true ? description.length === 0 : false);
  };

  const handleDelete = (h) => () => {
    addHashtag((arrayOfHashtags) =>
      arrayOfHashtags.filter((hashtag) => hashtag !== h)
    );
  };
  const handleHashtagChange = (event) => setHashtag(event.target.value);

  const handleSliderChange = (event, newValue) => {
    setMoney(newValue);
  };

  const handleInputChange = (event) => {
    setMoney(event.target.value === "" ? "" : Number(event.target.value));
  };

  const newHashtag = () => {
    if (arrayOfHashtags.length < 3) {
      addHashtag((arrayOfHashtags) => arrayOfHashtags.concat(hashtag));
    } else {
      console.log("Too many hashtags");
    }
  };
  const Hashtags = arrayOfHashtags.map((h) => (
    <Chip
      key={h.length}
      size='small'
      avatar={<Avatar>#</Avatar>}
      label={h}
      onDelete={handleDelete(h)}
    />
  ));

  return (
    <StyledCard>
      <Box mt={1}>
        <Grid container justify='center'>
          <TextField
            id='outlined-multiline-static'
            multiline
            rows={1}
            variant='outlined'
            placeholder='Title'
            value={title}
            onChange={handleTitleChange}
            helperText={
              open // only displays helper text if button has been clicked and fields haven't been filled
                ? !noTitle || petition
                  ? ""
                  : "Can't be an empty field"
                : ""
            }
          />
        </Grid>
      </Box>

      <Box mt={1}>
        <Grid container justify='center'>
          <CardMedia title='Petition'>
            <UploadButton />
          </CardMedia>
        </Grid>
      </Box>
      <div className={slider.root}>
        <Typography>Amount to raise</Typography>
        <Box>
          <Grid container justify='center'>
            <Slider
              min={500}
              max={10000}
              value={typeof money === "number" ? money : 0}
              onChange={handleSliderChange}
              aria-labelledby='input-slider'
            />

            <TextField
              className={slider.input}
              value={money}
              onChange={handleInputChange}
              InputProps={{
                startAdornment: (
                  <InputAdornment position='start'>$</InputAdornment>
                ),
              }}
              helperText={
                money < 500 || money > 10000
                  ? "Please enter a value between 500 and 10000"
                  : ""
              }
            />
          </Grid>
        </Box>
      </div>
      <Box mt={1} mb={1}>
        <Grid container justify='center'>
          <TextField
            size='small'
            inputProps={{
              style: { fontSize: 15 },
            }}
            id='outlined-multiline-static'
            multiline
            rows={1}
            placeholder='Hashtags'
            variant='outlined'
            value={hashtag}
            onChange={handleHashtagChange}
            helperText={
              arrayOfHashtags.length === 3
                ? "You reached the maximum amount of hashtags"
                : ""
            }
          />
          <Button color='primary' onClick={newHashtag}>
            Create!
          </Button>
          {arrayOfHashtags.length > 0 ? Hashtags : ""}
        </Grid>
      </Box>

      <Box mt={1} justify='center'>
        <Grid container justify='center'>
          <TextField
            size='small'
            inputProps={{
              style: { fontSize: 15 },
            }}
            id='outlined-multiline-static'
            multiline
            rows={5}
            placeholder='Description'
            variant='outlined'
            value={description}
            onChange={handleDescriptionChange}
            helperText={
              // only displays helper text if button has been clicked and fields haven't been filled
              open
                ? !noDescription || petition
                  ? ""
                  : "Can't be an empty field"
                : ""
            }
          />
        </Grid>
      </Box>

      <Box mt={1}>
        <Grid container justify='center'>
          <Button onClick={clearField}>
            <CreateIcon />
            Create Petition!
          </Button>

          {open && petition && (
            <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
              <Alert severity='success'>
                You have successfully create a petition!
              </Alert>
            </Snackbar>
          )}
          {open && !petition && (
            <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
              <Alert severity='error'>You're missing one or more fields</Alert>
            </Snackbar>
          )}
        </Grid>
      </Box>
    </StyledCard>
  );
};

export default connect(mapStateToProps)(PetitionForm);

---

哪里定义了

imageArray

和

imageUrlArr

？我可以看到

imageUrlArr=res.data

但是你不需要在这个函数中初始化它。是的，我们需要看看你在哪里定义了这些。你能分享整个例子吗。我想猜测一下，如果这是整个例子，或者定义是块范围的，你认为稍后可以访问它，而不是。整个例子在这里共享是否定义了

imageArray

和

imageUrlArr

？我可以看到

imageUrlArr=res.data

但是你不需要在这个函数中初始化它。是的，我们需要看看你在哪里定义了这些。你能分享整个例子吗。我想猜测一下，如果这是整个例子，或者定义是块范围的，你认为稍后可以访问它，而不是它。整个例子是共享的

Line 109:19:  'imageArray' is not defined   no-undef
  Line 113:11:  'imageUrlArr' is not defined  no-undef
  Line 123:24:  'imageUrlArr' is not defined  no-undef

Search for the keywords to learn more about each error.