Question

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

但是遍历所有平面列表项来查找与传入的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并更新“喜欢的”值而又不影响数组的顺序，请尝试使用findIndex而不是数组上的map。查找项目所在的索引，然后仅更新该值。如果它抱怨直接更改Redux存储值，则可能需要对数组和内部对象进行克隆。

祝你好运！

React Redux更新平面列表项，但将其转换为数组

2 个答案: