当在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相同的对象中使用它时，它总是返回undefined。

希望我能使自己理解。

谢谢。

Answer 1

我知道的是，每当您使用useState()钩子时，都将获得[variable , setVariable]而不是全状态组件“类”中的状态，并且setVaraiable()功能的目的是控制您的变量，所以我想您不能使用producerData.avatar设置该值。