Как удалить объект в массиве?

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 , чтобы удалить элемент из массива. В соединении вам нужно указать 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.items.filter(p => p.id !== prevProps.deletedPost.id);
    }
}

ОБНОВЛЕНО Я думаю, что вам следует удалять элементы в вашем магазине приставок, а не пытаться удалять сообщения из вашего API, поскольку API, скорее всего, генерирует одни и те же данные случайным образом. Измените свой actionCreator на

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

Затем используйте это в своем редукторе, чтобы вы могли сосредоточиться на массиве предметов, поступающих из вашего магазина редукторов. Затем снимите deletedPost: [] с вашего редуктора.

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

Answer 3

Это может помочь:

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

slice() принимает индекс объекта и необязательное количество элементов для удаления. поскольку вы просто хотите удалить один объект, вы передаете 1.

Answer 4

используйте splice () для удаления :), вы можете найти индекс поста, который нужно удалить, а затем удалить его, используя этот метод.