Удаление сообщения с React Redux api запрос на удаление - PullRequest
Новая
       86

Удаление сообщения с React Redux api запрос на удаление

0 голосов
/ 16 февраля 2020

Когда я консоль регистрирую this.props, я получаю массив с post.id, и я хочу сделать функцию onClick, чтобы удалить этот элемент из списка и не показывать на странице Что не так с моим кодом там?

так вот что у меня есть 

export const deletePost = id => dispatch => {
  fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
    method: "DELETE"
  })
    .then(res => res.json())
    .then(post =>
      dispatch({
        type: DELETE_POST,
        payload: id
      }),
    );
};

my reducer:

const initialState = {
  items: [],
  item: {}
};
    case FETCH_POSTS:
      return {
        ...state,
        items: action.payload
      };
    case DELETE_POST:
      return {
        ...state,
        items: action.payload
      };

Component contains of

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

const mapDispatchToProps = {
  fetchPosts, deletePost
}

And Delete button on each post:

<button key={post.id} onClick={()=>this.props.deletePost()}>X</button>```

1 Ответ

0 голосов
/ 17 февраля 2020

Я вижу здесь несколько вещей, на которые вам стоит взглянуть, и, надеюсь, они помогут вам решить вашу проблему.

Прежде всего, обратите внимание, что ваша функция deletePost ожидает параметр с идентификатором записи. Однако в коде JSX, который вы разместили для своей кнопки, вы вообще не передаете значение функции. Это означает, что свойство payload будет иметь значение undefined к моменту отправки действия.

Убедитесь, что вы обновили свое представление, чтобы передать ему идентификатор, поэтому вы вызываете правильную конечную точку (ваш DELETE запрос, вероятно, указывает на https://jsonplaceholder.typicode.com/posts/undefined прямо сейчас), и редуктор фактически получает идентификатор сообщения, которое вы хотите удалить: 

<button key={post.id} onClick={()=>this.props.deletePost(post.id)}>X</button>

Второе, что вы должны проверить, - это реализация вашего редуктора , Из того, что я понял в вашем сообщении и коде для метода deletePost, action.payload должен содержать число.

В таком случае то, как ваш редуктор обрабатывает действие DELETE_POST в редукторе, не имеет для меня особого смысла. 

case DELETE_POST:
    return {
        ...state,
        items: action.payload
    };

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

В этом случае вам необходимо вернуть новое состояние, в котором ваше свойство items заменяется новым списком, в котором отсутствует идентификатор, который вы хотите удалить. Однако в фрагменте кода, который вы написали, вы заменяете массив items числом . Это не то, что должно было произойти, начиная с того факта, что items все еще должен быть массивом чисел.

На самом деле вам нужно создать новый массив, в котором нет элемента, который вы хотите удалить . Для этого вы можете использовать метод filter: 

case DELETE_POST:
    return {
        ...state,
        items: state.items.filter(item => item !== action.payload)
    };

Этот код должен делать именно то, что вы хотите: здесь мы присваиваем свойство items в вашем штате полностью новый массив, где удаленный пост не включен.

filter возвращает массив с элементами, для которых указанная функция возвращает true. В этом случае функция стрелки, которую мы передаем filter, возвращает true для каждого элемента, который отличается от идентификатора записи, которую вы хотите удалить.

При использовании этого метода у вас также не будет проблемы с каким-либо видоизменением исходного значения state.items, так как filter возвращает новый экземпляр Array и не изменяет оригинал.

...