大家好！我不能将两个状态合并为一个状态。我为输入值创建了一种状态，为图像上传器创建了一种状态

Question

问题是我不知道如何从另一个状态将文件数据插入selectedFile。是否可能只使用一种状态？没有像我的情况那样创建另一个状态？感谢您的回答！提前谢谢您。

   title: "",
    selectedFile: [],
    article: "",
    color: "",
    size: "",
    price: "",
    description: "",
    makeup: "",
    manufactured: "",
    category: "",
    });
    const [files, setFiles] = useState([]);

// Form inputs
   <form autoComplete="off"
    noValidate
    className={classes.form}
    onSubmit={handleSubmit}
>
    <input
        name="selectedFile"
        type="file"
        multiple={true}
        onChange={(e) => {
            setPostProduct(e.target.files);
        }}
    />
    <input
        name="title"
        value={postProduct.title}
        type="text"
        placeholder="Название товара"
        onChange={(e) =>
            setPostProduct({
                ...postProduct,
                title: e.target.value,
            })
        }
    />
    <input
        name="price"
        value={postProduct.price}
        type="text"
        placeholder="Цена"
        onChange={(e) =>
            setPostProduct({
                ...postProduct,
                price: e.target.value,
            })
        }
    />

Answer 1

只需更改：

onChange={(e) => { setPostProduct(e.target.files); }}

从文件输入，到：

 onChange={(e) => {
          setPostProduct({
            ...postProduct,
            selectedFile: e.target.files
          });
        }}

所以代码应该是这样的：

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [postProduct, setPostProduct] = useState({
    title: "",
    selectedFile: [],
    article: "",
    color: "",
    size: "",
    price: "",
    description: "",
    makeup: "",
    manufactured: "",
    category: ""
  });

  useEffect(() => {
    console.log(postProduct.selectedFile);
  }, [postProduct]);

  return (
    // Form inputs
    <form
      autoComplete="off"
      noValidate
      // className={classes.form}
      // onSubmit={handleSubmit}
    >
      <input
        name="selectedFile"
        type="file"
        multiple={true}
        onChange={(e) => {
          setPostProduct({
            ...postProduct,
            selectedFile: e.target.files
          });
        }}
      />
      <input
        name="title"
        value={postProduct.title}
        type="text"
        placeholder="Название товара"
        onChange={(e) =>
          setPostProduct({
            ...postProduct,
            title: e.target.value
          })
        }
      />
      <input
        name="price"
        value={postProduct.price}
        type="text"
        placeholder="Цена"
        onChange={(e) =>
          setPostProduct({
            ...postProduct,
            price: e.target.value
          })
        }
      />
    </form>
  );
}

大家好！我不能将两个状态合并为一个状态。我为输入值创建了一种状态，为图像上传器创建了一种状态

Hello everyone! I cannot combine two states in one state . I have created one state for input values and one state for image uploader

input

reactjs

react-hooks

use-state