Полезная нагрузка не определена при попытке удалить выбранный идентификатор?

Question

Когда я выбираю и добавляю данные, нет проблем с полезной нагрузкой, но когда я удаляю элемент, нет ошибки, но ничего не удаляется из списка?Я схожу с ума, я новичок в реакции и избыточности, пытаюсь узнать что-то новое, я проверяю онлайн, что делали другие госзакупки, но не могу найти решение, спасибо за помощь.Если может также может показать мне путь для обновленияПост, какой путь я должен идти?при нажатии на значок обновления откройте модальное с модальным

import { FETCH_POSTS, NEW_POST, DEL_POST } from '../actions/types';

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

export default function (state = initialState, action) {
  console.info('POST reducer running', action)
  switch (action.type) {
    case FETCH_POSTS:
      return {
        ...state,
        items: action.payload
      };
    case NEW_POST:
      return {
        ...state,
        item: action.payload
      };
    case DEL_POST:
      return Object.assign({}, state, {
        items: console.info('DEL_POST postReducer: ', state),
        items: [...state.items.filter(item => item.id !== action.id)],
      });
    // return state.filter(post => post.id !== action.id)

    default:
      return state;
  }
}

//postActions.js

export const deletePost = id => dispatch => {
  console.info('deletePost dispatch: ', dispatch)
  fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: 'DELETE',
  })
    .then(res => console.info('deletePost response: ', res))
    .then(id =>
      dispatch({
        type: DEL_POST,
        payload: id
      })
    )
}


/Post.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { fetchPosts, deletePost } from '../../actions/postActions';

class Posts extends Component {
  componentWillMount() {
    this.props.fetchPosts();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.newPost) {
      this.props.posts.unshift(nextProps.newPost);
    }
  }

  onDeleteClick = id => {
    console.info('deleted id clicked', id)
    this.props.deletePost(id)
  }

  render() {
    const postItems = this.props.posts.map(post => (
      <tr key={post.id}>
        <td>{post.title}</td>
        <td>{post.body}</td>
        <td>
          <i class="fas fa-trash"
            style={icon}
            onClick={() => this.onDeleteClick(post.id)}
            title="Delete"
          />
          <i class="fas fa-edit"
            style={icon}
            onClick={this.onUpdateClick}
            title="Edit"
          />
        </td>
      </tr>
    ));
    if (!postItems) {
      return (
        <div>
          nothing found...
        </div>
      )
    }
    return (
      <div>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Title</th>
              <th scope="col">Body</th>
              <th scope="col">Process</th>
            </tr>
          </thead>
          <tbody>{postItems}</tbody>
        </table>
      </div>
    );
  }
}

const icon = {
  padding: "5px",
  cursor: "pointer"
}

Posts.propTypes = {
  fetchPosts: PropTypes.func.isRequired,
  deletePost: PropTypes.func.isRequired,
  posts: PropTypes.array.isRequired,
  // newPost: PropTypes.object
};

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


export default connect(mapStateToProps, { fetchPosts, deletePost })(Posts);

Answer 1

Я думаю, что в DEL_POST в методе фильтра это должно быть item.id !== action.payload, а у вас есть item.id !== action.id.Вы передали id как payload значение при отправке действия DEL_POST.

 export default function (state = initialState, action) {
    console.info('POST reducer running', action)
    switch (action.type) {
        case FETCH_POSTS:
            return {
                ...state,
                items: action.payload
            };
        case NEW_POST:
            return {
                ...state,
                item: action.payload
            };
        case DEL_POST:
            return {
                ...state,
                items: state.items.filter(item => item.id !== action.payload)
            }
        default:
            return state;
    }
}


export const deletePost = id => dispatch => {
    console.info('deletePost dispatch: ', dispatch)
    return fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
        method: 'DELETE',
    })
        .then(res => {
            console.info('deletePost response: ', res)
            dispatch({
                type: DEL_POST,
                payload: id
            })
        })
}

Answer 2

Я думаю, что вы сделали несколько ошибок здесь:

• Включение состояния в Object.assign
• Вы написали action.id вместо action.payload.id
• Использование оператора распространения в Array.filter (который уже создает новый массив)
• Забыть включить элемент в то, что вы возвращаете (если задумано, игнорировать этот комментарий)

С этим в вашем редукторе, он должен работать правильно.

     case DEL_POST:
      return Object.assign({}, {
        items: state.items.filter(item => item.id !== action.payload.id),
        item: state.item,
      });

Кроме того, я настоятельно советую вам ничего не регистрировать непосредственно внутри редуктора.