React redux 更新 flatlist 项目，但将项目转换为数组

Question

我正在使用带有 react native 的 react redux，我有一个平面照片列表。当我单击“赞”按钮时，我只想更新平面列表中的一张照片。以下代码似乎有效，并且照片的状态已更新，但不知何故我的提要在更新后搞砸了。更新前this.props.feed[index]是单个对象，更新后this.props.feed[index]变成对象数组，我做错了什么？我的想法来自：https://stackoverflow.com/a/47651395/10906478

但是，循环遍历 flatlist 的所有项目以找到与传入的 photoId 匹配的项目似乎也非常低效。有没有更好的办法？

屏幕：

toggleLike = async(photoId, index) => {
    console.log("before: ", this.props.feed[index]);
    await this.props.toggleLike(photoId);
    console.log("after: ", this.props.feed[index]);
}

...

<FlatList
    data = {this.props.feed}
    keyExtractor = {(_, index) => index.toString()}
    renderItem = {({item, index}) => (
        <View key={index}>
            <TouchableOpacity onPress={()=> this.toggleLike(item.photoId, index)}>
                <Text>Button</Text>
            </TouchableOpacity>
        </View>
    )}
/>

动作

export const toggleLike = (photoId) => async(dispatch) => {
    dispatch({type: "UPDATE_ITEM", photoId: photoId})
}

减速器

export default (state = initialState, action) => {
    switch(action.type) {
        case "UPDATE_ITEM":
            return {...state, feed: [state.feed.map((item,_) => {
                if (item.photoId === action.photoId) {
                   return { ...item, liked: !item.liked };
                }
                return { ...item };
            })]};

        // other cases

Answer 1

你在一个数组中调用map，它返回一个嵌套数组：

return {...state, feed: /* Here ->*/[state.feed.map((item,_) => {
    if (item.photoId === action.photoId) {
        return { ...item, liked: !item.liked };
    }
    return { ...item };
})]};

应该这样做：

return {
  ...state, // Current state
  feed: state.feed.map((item, _) => { // map returns a new array
    if (item.photoId === action.photoId) {
      item.liked = !item.liked;
    }
    return item;
  })
}

Answer 2

对于作为数组的提要，请仔细查看您的代码。您将看到您已将 feed 的值包含在方括号中并在数组上运行映射。所以 feed 是一个数组，map 也是一个数组。这就是为什么在 state.feed 的每个索引点都有一个对象数组的原因。我通常建议你去掉周围的方括号，让你的地图创建数组。

不过，这实际上并不是问题的根本原因，还有更彻底的解决方案。

如果需要在不打乱数组顺序的情况下找到匹配的ID并更新“liked”值，请尝试在数组上使用findIndex而不是map。找到您的项目所在的索引并仅更新该值。如果它抱怨直接改变 Redux 存储值，您可能需要克隆数组和内部对象。

祝你好运！