用惯性反应和laravel 9上传文件答案

【问题标题】：upload file with inertia react and laravel 9用惯性反应和laravel 9上传文件
【发布时间】：2022-10-20 15:53:49
【问题描述】：

我在使用惯性反应和 laravel 9 上传文件时遇到问题我使用这个确切的代码，但是当我选择一个文件时，我在控制台中遇到了错误 https://inertiajs.com/file-uploads

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
input
form
Create@http://127.0.0.1:5173/resources/js/Pages/Admin/Setting/Content/ContactUs/Create.jsx?t=1659389601569:28:14
s@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_inertia-react.js?v=0d793d15:741:16

The above error occurred in the <input> component:

input
form
Create@http://127.0.0.1:5173/resources/js/Pages/Admin/Setting/Content/ContactUs/Create.jsx?t=1659389680993:28:14
s@http://127.0.0.1:5173/node_modules/.vite/deps/@inertiajs_inertia-react.js?v=0d793d15:741:16

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

这是我的代码

import React from "react";

import Button from "@mui/material/Button";
import { Link, useForm, usePage } from "@inertiajs/inertia-react";

export default function Create() {
    const { data, setData, post, progress } = useForm({
        name: null,
        avatar: null,
    });

    function submit(e) {
        e.preventDefault();
        post("/users");
    }

    return (
        <form onSubmit={submit}>
            <input
                type="text"
                value={data.name}
                onChange={(e) => setData("name", e.target.value)}
            />
            <input
                type="file"
                value={data.avatar}
                onChange={(e) => setData("avatar", e.target.files[0])}
            />
            {progress && (
                <progress value={progress.percentage} max="100">
                    {progress.percentage}%
                </progress>
            )}
            <button type="submit">Submit</button>
        </form>
    );
}

我认为它的问题 onChange={(e) => setData("avatar", e.target.files[0])}

【问题讨论】：

标签： reactjs laravel inertiajs

【解决方案1】：

我有同样的问题......我解决了从输入类型 =“文件”中删除值属性的问题。

 <input
    type="file"
    onChange={(e) => setData("avatar", e.target.files[0])}
 />

（如果您在文档中看到 svelte 或 vue 的相同示例，您将不会在此处看到 value 属性）。

【讨论】：