在 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 方法中相同。