我如何为图像文件设置 React initialState

Question

i'm making form component for registering certain contents information but as you see, i have problem with ts issue.

function handleCategoryFormData is handling input value. but when i set image files in image state, // TS2418: Type of computed property's value is 'File', which is not assignable to type 'string'. is showing. so i changed image initialState. but it's not working. how can i handle this problem?

import React, { useState } from "react";
import _ from "lodash";
import { Button, FormLayout, Input, PageTitle } from "@components/common";

const CategoryFormPage = () => {
  const [categoryFormData, setCategoryFormData] = useState({
    image: "",
    name: "",
    order: "",
    searchingTag: "",
    exceptionTag: "",
    previousCategory: [],
    connectedInterest: [],
  });

  const handleCategoryFormData = (e: React.ChangeEvent) => {
    const { name, value, files } = e.target as HTMLInputElement;

    if (name === "image" && files) {
      const imageFile = _.get(files, 0);

// TS2418: Type of computed property's value is 'File', which is not assignable to type 'string'.

// TS2418: Type of computed property's value is 'File', which is not assignable to type 'null'.

// TS2418: Type of computed property's value is 'File', which is not assignable to type 'undefined'.

      setCategoryFormData({ ...categoryFormData, [name]: imageFile }); // [![enter image description here][1]][1]<= error happend
      return;
    }

    setCategoryFormData({ ...categoryFormData, [name]: value });
  };

  return (
    <div>
      ...
    </div>
  );
};

export default CategoryFormPage;


  [1]: https://i.stack.imgur.com/tfgAK.png

Answer 1

Try this! what you are doing is assigning File type to a string you need to explicitly define the type that the image would accept string | File string | File for type.

{...}

type categoryFormDataType = {
  image: string | File;
  name: string;
  order: string;
  searchingTag: string;
  exceptionTag: string;
  previousCategory: string[]; // define array here as well assuming it would be array of string
  connectedInterest: string[]; // define array here as well assuming it would be array of string
};

const CategoryFormPage = () => {
  const [categoryFormData, setCategoryFormData] = React.useState<categoryFormDataType>({
    image: '',
    name: '',
    order: '',
    searchingTag: '',
    exceptionTag: '',
    previousCategory: [],
    connectedInterest: [],
  });

{...}