在 ReactJS 的 FormData 中使用时，头像总是显示为未定义

Question

我正在尝试创建一个表单，其中我将文本输入和文件输入汇总在一起，并且一切正常，直到我决定实现所述文件输入。

这是我的代码：

const [producerData, setProducerData] = useState({

    title: '',

    text: '',

    address: '',

    status: '',

    avatar: '',

});

const { title, text, address, status, avatar } = producerData;

const [avatarname, setAvatarName] = useState('Choose Avatar');

const [uploadPercentage, setUploaderPercentage] = useState(0);

const handleChange = name => e => {

    setProducerData({...producerData, [name]: e.target.value });

    // setAvatar(e.target.files[0]);

    name === 'avatar' && setProducerData({...producerData, avatar: e.target.files[0]}) && setAvatarName(e.target.files[0].name);

    // console.log(e.target.files);

}

const addProducer = async e => {

    e.preventDefault();

    const formData = new FormData();

    producerData.avatar = formData.append('avatar', avatar);

    console.log(producerData);

    // addProducer(producerData, setUploaderPercentage);

}

让我们这样说吧，如果我创建一个函数，它就可以工作，也许setAvatar正如代码中所注释的那样。那行得通，但是当我尝试在与 producerData 相同的对象中使用它时，它总是返回未定义的。

编辑：我在几个 StackOverflow 线程上发现，为了一起处理常规和文件输入，我需要执行以下操作：

const addProducer = async e => {

    e.preventDefault();

    const formData = new FormData();

    formData.append( 'title', e.target.title.value)

    formData.append( 'text', e.target.text.value)

    formData.append( 'address', e.target.address.value)

    formData.append( 'status', e.target.status.value)

    formData.append('avatar', e.target.avatar.files[0]);

    console.log(formData);

    // setAvatarName(e.target.files[0].name);

    // addProducer(producerData, setUploaderPercentage);

}

并且我需要从我的输入中删除 onChange 和 value 属性。基本上从这个：

<Form.Group>

    <Form.Label htmlFor={`title`}>Title</Form.Label>

    <InputGroup>

        <InputGroup.Prepend>

            <InputGroup.Text id={`title-text`}>

                <i className={`fas fa-heading`} />

            </InputGroup.Text>

        </InputGroup.Prepend>

这只是我如何拥有我正在使用的其余输入的一个示例。希望我能让自己明白。

Answer 1

我所知道的是，每当您使用useState()钩子时，您将获得[variable , setVariable]状态完整组件“类”中的状态而不是状态，并且setVaraiable()函数的目的是控制变量的值，所以我猜您不允许访问使用 设置值producerData.avatar。

Answer 2

设置 producerData 的方式与在 handleChange 方法中相同。