Question

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

 var collection = from p in dt.AsEnumerable()
                         join q in salaryDT.AsEnumerable() on p.Field<int>("Emp") equals q.Field<int>("Emp1") into UP
                         from t in UP
                         select t;
 DataTable resultdt = new DataTable();
 dt = collection.CopyToDataTable();

编辑：操作

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));
};

编辑2：

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;
    }
}

编辑3：

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

编辑4：

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

**当我添加循环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

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

use strict;
use warnings;
use Time::HiRes 'usleep';
my $num = shift;
$num =~ tr/_//d;
usleep $num;

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

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

然后在减速器中使用它，以便您可以专注于减速器商店中的商品阵列。然后从减速器中移除export const deletedPost = (id) => { dispatch({ type: DELETED_POST, payload: id }); };。

deletedPost: []

Answer 3

使用splice（）删除:)，您可以找到要删除的帖子索引，然后使用此方法将其删除。

Answer 4

这可能会帮助：

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

slice()获取对象的索引以及要删除的可选项目数。由于您只想删除单个对象，因此请传递1。

如何删除数组中的对象？

4 个答案: