React native 反应/重排。。。错误:操作必须是普通对象。使用自定义中间件进行异步操作

React native 反应/重排。。。错误:操作必须是普通对象。使用自定义中间件进行异步操作,react-native,redux,async-await,nested-object,React Native,Redux,Async Await,Nested Object,我有一个由照片网格组成的组件,用户可以在其中单击一个单元格以从相机卷上载图像。组件状态是一个具有一系列键-值对的对象,键是索引,值本身是一个具有图像属性的对象。在上传和删除照片时,状态正在正确更新,只是当我调用dispatch时,我得到了一个错误 类似的问题也涉及到人们在异步函数中调用dispatch或使用wait,但我在这里不做任何声明 这让我在最后一天很恼火,我觉得我错过了一些非常明显的东西,所以我感谢任何帮助 const PhotoUpload = ({ navigation }) =&g

我有一个由照片网格组成的组件,用户可以在其中单击一个单元格以从相机卷上载图像。组件状态是一个具有一系列键-值对的对象,键是索引,值本身是一个具有图像属性的对象。在上传和删除照片时,状态正在正确更新,只是当我调用dispatch时,我得到了一个错误

类似的问题也涉及到人们在异步函数中调用dispatch或使用wait,但我在这里不做任何声明

这让我在最后一天很恼火,我觉得我错过了一些非常明显的东西,所以我感谢任何帮助

const PhotoUpload = ({ navigation }) => {


    const [photos, setPhotos] = useState(
        {'0' : {image: null},
         '1' : {image: null},
         '2' : {image: null},
         '3' : {image: null},
         '4' : {image: null},
         '5' : {image: null}}
     )

    const dispatch = useDispatch();
    dispatch(setPhotos(photos)); // Error: Actions must be plain objects. Use custom middleware for async actions.


    ...

    return (
        <>
            <SortableGrid >
            {
                Object.keys(photos).map((key) =>  
                // image is not showing
                <View key={ key } fixed={photos[key].image === null ? true : false} onTap={() => this.pickSingle(true, false, key)}  style={ styles.itemContainer } >
                    <Image defaultSource={ require('./default-avatar.png') } source={ getPhoto(key) } style={ styles.itemImage }  />
                    { photos[key].image != null 
                        ? <TouchableOpacity onPress={() => deletePhoto(key)} style={styles.deleteButton} >
                            <Icon name={"ios-remove"}  size={20} color="#ff0000" />
                          </TouchableOpacity>
                        : null
                    }
                </View>

                )
            }
            </SortableGrid>
        </>
    )
以及行动:

export const setPhotos = (receivedPhotos) => {
    console.log(receivedPhotos)
    return{
        type: 'SETPHOTOS',
        payload: receivedPhotos
    };
}

可能是变量名冲突?据我所知,您已将名称
setPhotos
用于操作和设置本地组件状态


当您调用
dispatch(setPhotos(photos))
时,它试图调度本地
setPhotos
,而不是您的redux操作,因此出现了错误。

就是这样,我现在踢了踢自己。谢谢你,詹姆斯!没问题。很容易忽视这样的事情!:)你介意把这个标记为可接受的答案吗?
export const setPhotos = (receivedPhotos) => {
    console.log(receivedPhotos)
    return{
        type: 'SETPHOTOS',
        payload: receivedPhotos
    };
}