当我尝试在react-redux应用程序中实现文件上传程序时,我遇到了一些问题。到目前为止,我都是这样处理所有其他输入的:
所有的输入都有一个名字和一个值。当它们被改变时,它们调用相同的函数。
此函数分派一个操作,因此在组件的容器中有:
onInputChange: (name, value) => {
dispatch(inputValueChange(name, value));
}
这是操作创建者:
export const inputValueChange = (name, value) => ({
type: INPUT_VALUE_CHANGE,
name,
value,
});
而现在在减速器中,有一个案例对应着这个动作:
case INPUT_VALUE_CHANGE:
return {
...state,
[action.name]: action.value,
};
这适用于我所有的文本类型输入和选择元素。如果我用相同的动作发送名称“image”(对应于状态中元素的名称)和值e.target.files[0],我可以在reducer中用console.log看到预期的信息。
See the image
但是状态没有被更新,我不明白为什么,我怀疑这可能是因为我试图更新状态的一个元素,而这个元素实际上是一个对象,但是这个方法适用于状态的数组元素,我试图给予状态一个初始值null,在这个例子中状态被更新了,图像是一个空对象。
那么,如何正确地更新我的状态呢?
在此之后,我将使用所有这些元素将数据发布到我的API。我计划在调用API之前做以下事情:
const bodyFormData = new FormData();
bodyFormData.append('image', image); //image is the object which I put in the state
// Then i will do a post request on /api/upload by giving it bodyFormData
这样可以吗?
1条答案
按热度按时间m3eecexj1#
我解决了我的问题。这很棘手。
解决方案是当我把它还给组件时做一个console. log(image)。这将使我能够看到映像的信息是从redux状态给组件的。实际上,状态被正确地更新了,但是Redux开发工具不能读取这种对象,所以它显示了一个空对象,而对象不是空的。
很高兴知道!