我怎么能用 react 和 redux 处理文件上传?
How could I handle a file upload with react and redux?
当我尝试在我的 react-redux 应用程序中实现文件上传器时遇到了一些问题。
到目前为止,我已经以这种方式处理了所有其他输入:
所有输入都有一个名称和一个值。当它们被改变时,它们调用相同的函数。
这个函数dispatch了一个action,所以在组件的容器里,有:
onInputChange: (name, value) => {
dispatch(inputValueChange(name, value));
}
这是动作创建者:
export const inputValueChange = (name, value) => ({
type: INPUT_VALUE_CHANGE,
name,
value,
});
现在在reducer中,有一个case对应这个action :
case INPUT_VALUE_CHANGE:
return {
...state,
[action.name]: action.value,
};
这适用于我所有的文本输入和选择元素。
如果我使用相同的操作发送名称“图像”(对应于状态中元素的名称)作为值 e.target.files[0],我可以看到带有 [=38= 的预期信息] 在减速器中。
See the image
但是状态没有更新,我不明白为什么。我怀疑这可能是因为我试图更新实际上是一个对象的状态元素。但是这种方法适用于数组状态的元素。
我试图给状态一个初始值 null。在这种情况下,状态被更新并且图像是一个空对象。
那么我怎样才能正确更新我的状态?
在此之后,我将使用所有这些元素来 post 数据到我的 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
这听起来不错吗?
我解决了我的问题。非常棘手。
解决方案是在我将其返回给组件时执行 console.log(image)。这将使我能够看到图像的信息是从 redux 状态提供给组件的。实际上,状态已正确更新,但 Redux Dev Tools 无法读取此类对象,因此显示为空对象,而对象不为空。
很高兴知道!
当我尝试在我的 react-redux 应用程序中实现文件上传器时遇到了一些问题。 到目前为止,我已经以这种方式处理了所有其他输入:
所有输入都有一个名称和一个值。当它们被改变时,它们调用相同的函数。
这个函数dispatch了一个action,所以在组件的容器里,有:
onInputChange: (name, value) => {
dispatch(inputValueChange(name, value));
}
这是动作创建者:
export const inputValueChange = (name, value) => ({
type: INPUT_VALUE_CHANGE,
name,
value,
});
现在在reducer中,有一个case对应这个action :
case INPUT_VALUE_CHANGE:
return {
...state,
[action.name]: action.value,
};
这适用于我所有的文本输入和选择元素。 如果我使用相同的操作发送名称“图像”(对应于状态中元素的名称)作为值 e.target.files[0],我可以看到带有 [=38= 的预期信息] 在减速器中。
See the image
但是状态没有更新,我不明白为什么。我怀疑这可能是因为我试图更新实际上是一个对象的状态元素。但是这种方法适用于数组状态的元素。 我试图给状态一个初始值 null。在这种情况下,状态被更新并且图像是一个空对象。
那么我怎样才能正确更新我的状态?
在此之后,我将使用所有这些元素来 post 数据到我的 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
这听起来不错吗?
我解决了我的问题。非常棘手。
解决方案是在我将其返回给组件时执行 console.log(image)。这将使我能够看到图像的信息是从 redux 状态提供给组件的。实际上,状态已正确更新,但 Redux Dev Tools 无法读取此类对象,因此显示为空对象,而对象不为空。
很高兴知道!