如何删除数组中的对象？

Question

我使用了 componentDidUpdate 并在其中放置了一个 shift 方法，该方法用于从 JSON 数组中删除一个对象，从而重新呈现显示的帖子，但 shift 方法从数组中独立删除第一个对象，其中我会按帖子上的删除按钮吗？那么，是否有可能绕过删除第一个元素而支持指定要删除的元素？

componentDidUpdate(prevProps, prevState) {
        const {posts} = this.props;
        const indexPosts = posts.findIndex((post) => post.id === this.state.postId);

        if(prevProps.posts !== posts){
            this.handleData();
        } else if (indexPosts !== -1)
        {
            this.informationAlert();
            const log = posts.splice(indexPosts, 1);
            console.log(log);
        }   
    }

编辑：操作

export const deletedPost = (id) => (dispatch) => {
    axios
        .delete(`https://jsonplaceholder.typicode.com/posts/${id}`, id, {
            headers: {
                'Content-type': 'application/json'
            }
        })
        .then((post) =>
            dispatch({
                type: DELETED_POST,
                payload: post.data
            })
        )
        .catch((err) => console.log(err));
};

import { FETCH_POSTS, NEW_POST, DELETED_POST, FETCH_COMMENTS, NEW_COMMENT } from '../actions/types';

const initialState = {
    items: [],
    item: {},
    itemComent: [],
    itemNewComment: {},
    deletedPost: []
};

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_POSTS:
            return {
                ...state,
                items: action.payload
            };
        case NEW_POST:
            return {
                ...state,
                item: action.payload
            };
        case DELETED_POST:
            return {
                ...state,
                deletedPost: action.payload
            };
        case FETCH_COMMENTS:
            return {
                ...state,
                itemComent: action.payload
            }
        case NEW_COMMENT:
            return {
                ...state,
                itemNewComment: action.payload
            }
        default:
            return state;
    }
}

编辑 2：

const mapStateToProps = (state) => ({
    posts: state.posts.items,
    newPost: state.posts.item,
    deletedPost2: state.posts.deletedPost
});

编辑 3：

handleDeletedPost = (id) => {
        this.setState({
            postId: id
        })
    }

编辑 4：

//I added in constructor 
this.state: dataPost: '',

//next I create function to load data and send to state dataPost
handleData = (e) => {
        const {posts} = this.props;
        const {dataPost} = this.state;
        const letang = posts;
        const postsData = dataPost;

        if (postsData.length <= 0) {            
            this.setState({
                dataPost: letang
            })
        } else {
            console.log('stop')
        }       
    }
// next i create in componentDidUpdate this code
componentDidUpdate(prevProps, prevState) {
        const {posts} = this.props;
        const indexPosts = posts.findIndex((post) => post.id === this.state.postId);

        if(prevProps.posts !== posts){
            this.handleData();
        } else if (indexPosts !== -1)
        {
            this.informationAlert();
            const log = posts.splice(indexPosts, 1);
            console.log(log);
        }   
    }

** 当我添加循环 if (indexPosts !== -1) 时，我的数组只被剪切一个对象:-) API 帖子：https://jsonplaceholder.typicode.com/posts/

当您按详细信息然后按删除图标时，可以在此链接上看到结果：https://scherlock90.github.io/api-post-task/

Answer 1

您需要使用splice 从数组中删除一个元素。 在 splice 中，您需要在第二个参数中提供 startIndex 和要删除的元素数。在下面的代码中使用 `findIndex 方法查找索引，第二个参数是 1，因为我们只需要删除 1 个元素。

试试这个

componentDidUpdate (prevProps, prevState) {
        if (prevProps.deletedPost) {
            const { posts } = this.props
            const letang = posts.splice(posts.findIndex( (post)=> post.id === prevProps.deletedPost.id), 1);

           console.log(posts); // this should have array without deletedPost
        }
    }

Answer 2

这可能会有所帮助：

componentDidUpdate (prevProps, prevState) {
    if (prevProps.deletedPost) {
        const letang = this.props.posts;
        letang.splice(deletedPost, 1);
    }
}

slice() 获取对象的索引和要删除的可选项目数。因为您只想删除一个传递 1 的对象。

Answer 3

这可能会有所帮助，请尝试过滤掉数组中不需要的对象。

componentDidUpdate (prevProps, prevState) {
    if (prevProps.deletedPost) {
        const letang = this.props.items.filter(p => p.id !== prevProps.deletedPost.id);
    }
}

更新 我认为您应该删除 redux 商店中的项目，而不是尝试从您的 api 中删除帖子，因为 api 可能宁愿随机生成相同的数据。将您的 actionCreator 更改为

export const deletedPost = (id) => {
   dispatch({
       type: DELETED_POST, 
       payload: id 
   });
};

然后在你的 reducer 中使用它，这样你就可以专注于来自你的 reducer 存储的 items 数组。然后从减速器中删除deletedPost: []。

...
    case DELETED_POST:
        const newItems = state.items.filter(p => p.id !== action.payload);
        return {
            ...state,
            items: [ ...newItems ],
        };
...

Answer 4

使用splice()删除:)，你可以找到要删除的帖子的索引，然后用这个方法删除它。