index.js:1 警告：道具类型失败：提供给“ForwardRef(Avatar)”的“object”类型的道具“src”无效，预期为“string”

Question

我有一个项目，这个项目是组织用户的操作，每个用户对他的账户都有一定的设置，从这些设置中他可以点击他的头像（头像），选择一张图片并添加到个人资料帐户

但是我得到了这个错误：

index.js:1 Warning: Failed prop type: Invalid prop `src` of type `object` supplied to `ForwardRef(Avatar)`, expected `string`.

我该如何解决？

并且此文件包含用于添加帐户图片的整个徽标

profilePage.js:

const useStyles = makeStyles((theme) => ({
  avatar: {
    border: `4px solid ${theme.palette.background.default}`,
  },
  topBg: {
    background: 'url("assets/images/profile/morain-lake.jpg")!important',
    backgroundSize: "cover!important",
    backgroundPosition: "center center!important",
  },
  layoutHeader: {
    background: "none",
    height: 320,
    minHeight: 320,
    [theme.breakpoints.down("md")]: {
      height: 240,
      minHeight: 240,
    },
  },
}));

function ProfilePage() {
  const classes = useStyles();
  const [selectedTab, setSelectedTab] = useState(0);
  const [selectedFile, setSelectedFile] = useState(null);
  function handleTabChange(event, value) {
    setSelectedTab(value);
  }

  const fileSelectHandler = (event) => {
    console.log("beore event");
    setSelectedFile(event.target.files[0]);
    console.log("after event");
  };

  const fileUploadHandler = () => {
    const fd = new FormData();
    fd.append("image", selectedFile, selectedFile.name);
    axios.post("/app-files", fd).then((res) => {
      console.log("res: ", res);
      // onUploadProgress: (ProgressEvent) => {
      //   console.log(
      //     "Upload Progress: " +
      //       Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100) +
      //       "%"
      //   );
      // };
    });
  };

  return (
    <FusePageSimple
      classes={{
        topBg: classes.topBg,
        header: classes.layoutHeader,
        wrapper: "bg-transparent",
        content: "w-full max-w-2xl mx-auto",
        toolbar:
          "w-full max-w-2xl mx-auto relative flex flex-col min-h-auto h-auto items-start",
      }}
      header={<></>}
      contentToolbar={
        <>
          <div className="w-full px-24 pb-48 flex flex-col md:flex-row flex-1 items-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1, transition: { delay: 0.1 } }}
            >
              <input
                type="file"
                // onChange={handleChange}
                // style={{ display: "none" }}
                id="upload"
                accept="image/*"
                style={{ display: "none" }}
                onChange={fileSelectHandler}
                 // ref={(fileInput) => (this.fileInput = fileInput)}
              />
              <label htmlFor="upload">
                <IconButton
                  color="primary"
                  aria-label="upload picture"
                  component="span"
                  onClick={fileUploadHandler}
                  // onClick={() => this.fileInput.click()}
                >
                  <Avatar
                    className={clsx(classes.avatar, "-mt-64  w-128 h-128")}
                    src={selectedFile}
                    // onClick={fileUploadHandler}
                  />
                </IconButton>
              </label>
            </motion.div>
            <div className="flex flex-col md:flex-row flex-1 items-center justify-between p-8">
              <motion.div
                initial={{ opacity: 0, x: -40 }}
                animate={{ opacity: 1, x: 0, transition: { delay: 0.2 } }}
              >
                <Typography
                  className="md:px-16 text-24 md:text-32 font-semibold tracking-tight"
                  variant="h4"
                  color="inherit"
                >
                  John Doe
                </Typography>
              </motion.div>

              <div className="flex items-center justify-end -mx-4 mt-24 md:mt-0">
                <Button
                  className="mx-8"
                  variant="contained"
                  color="secondary"
                  aria-label="Follow"
                >
                  Follow
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  aria-label="Send Message"
                >
                  Send Message
                </Button>
              </div>
            </div>
          </div>
          <Tabs
            value={selectedTab}
            onChange={handleTabChange}
            indicatorColor="primary"
            textColor="inherit"
            variant="scrollable"
            scrollButtons="off"
            className="w-full px-24 -mx-4 min-h-40"
            classes={{
              indicator: "flex justify-center bg-transparent w-full h-full",
            }}
            TabIndicatorProps={{
              children: (
                <Divider className="w-full h-full rounded-full opacity-50" />
              ),
            }}
          >
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="Timeline"
            />
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="About"
            />
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="Photos & Videos"
            />
          </Tabs>
        </>
      }
      content={
        <div className="p-16 sm:p-24">
          {selectedTab === 0 && <TimelineTab />}
          {selectedTab === 1 && <AboutTab />}
          {selectedTab === 2 && <PhotosVideosTab />}
        </div>
      }
    />
  );
}

export default ProfilePage;

Answer 1

const fileSelectHandler = (event) => {
    console.log("beore event");
    setSelectedFile(event.target.files[0]);
    console.log("after event");
  };

我想在上面的函数中你有一个对象在 event.target.files[0]

您必须在状态中设置特定对象 属性 下面的示例代码：

const fileSelectHandler = (event) => {
    const value = event?.target?.files[0]?.name;
    console.log("beore event",value);
    setSelectedFile(()=>value);
    console.log("after event",value);
  };