Question

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

类似的问题涉及到人们在异步函数中调用dispatch或使用await，但是我在这里没有声明。

这一直困扰着我最后一天，我觉得我确实缺少一些明显的东西，因此我感谢您的帮助。

这是我的减速器

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>
        </>
    )

动作：

const INITIAL_STATE = {
  user: {
    name: "",
    gender: "",
    birthdate: "",
    photos: {},
  }
}


const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case 'SETPHOTOS':
          return {
            // likely incorrect logic here
            ...state, 
            user: {
              ...state.user,
              photos : state.user.photos.concat(action.payload)
            }
          }
      default:
        return state
    }
  };

Answer 1

可能是变量名冲突？据我所知，您已将名称setPhotos用于操作并设置了本地组件状态。

调用dispatch(setPhotos(photos))时，它试图调度本地setPhotos，而不是您的redux动作，因此会出错。

React / Redux ...错误：操作必须是普通对象。使用自定义中间件进行异步操作

1 个答案: