Функциональность Reactjs / Redux Edit не работает
Я создал приложение и добавил функциональность CRUD, и все работает нормально, кроме функции редактирования. Проблема в том, что когда я пытаюсь отредактировать, он действительно попадает в нужную базу данных и обновляет запись, но в приложении реакции он просто принудительно обновляет все записи до конкретной одной записи.
Обновление саги: -
function* updateFeedbackSaga(action) {
try {
const updateData = yield call(api.feedback.edit, action.payload);
yield put(actions.updateFeedback(updateData));
console.info(updateData);
} catch (err) {
yield put(actions.updateFeedbackErrors(err.response.data));
}
}Редактировать редуктор
import * as actionTypes from "../Actions/types";
const initialState = {
feedbacks: [],
feedback: {},
loading: false
};
export default (state = initialState, action) => {
switch (action.type) {
case actionTypes.UPDATE_FEEDBACK:
return {
...state,
feedbacks: state.feedbacks.map(
feedback =>
feedback.id === action.payload.id ? action.payload : feedback
)
};
default:
return state;
}
};Действия
//Edit and update Feedback
export const updateFeedbackRequest = newFeedbackData => ({
type: actionTypes.UPDATE_FEEDBACK_REQUEST,
payload: newFeedbackData
});
export const updateFeedback = updatedData => ({
type: actionTypes.UPDATE_FEEDBACK,
payload: updatedData
});
export const updateFeedbackErrors = errors => ({
type: actionTypes.GET_ERRORS,
payload: errors
});Вот как печать
<section className = "feedback">
<div className = "employees__table" >
<h4 className = "semi-heading" > Feedback Table < /h4>
{
FeedbackList feedbacks = {feedbacks} />
}
</div>
</section >
const mapStateToProps = state => ({
feedbackList: selectors.FeedbackSelector(state)
});ЗДЕСЬ ИЗОБРАЖЕНИЯ
Если я редактирую первый элемент, состояние будет таким
В моем списке отзывов повторяются отредактированные отзывы. Я не знаю, где я делаю не так.
Вот рабочий код:
https://codesandbox.io/s/github/montygoldy/employee-review/tree/master/client
логин: [email protected] пароль: 12345678
Что показывает console.info(updateData); в вашем создателе действий?
@ Jayce444, спасибо за ответ ... Я добавил изображение db, и все идентификаторы разные. а также edit попадает в правую конечную точку api, что означает, что он фактически обновляет базу данных, и если я очищу состояние и снова войду в систему, я увижу изменения.
@dhilt это данные формы. Я проверил это .
Кстати, было бы неплохо увидеть результат вызова обновления. Кроме того, я не понимаю код вашего компонента: что-то не в порядке с тегом FeedbackList, и связь между feedbacks и feedbackList не очевидна ...
@dhilt Я только что добавил соответствующий код для FeedbackList. Как вы можете видеть на картинке, они работают нормально. проблема, которую я не могу понять, заключается в том, что мое действие редактирует и обновляет базу данных, но в состоянии реакции он просто печатает отредактированную обратную связь, и если
Я выхожу из системы и снова вхожу в систему Я вижу новый обновленный отзыв
Я добавил рабочий код ..
@MontyGoldy Sandbox - это круто! Не могу войти, получаю TypeError: Cannot read property 'data' of undefined at loginSaga$
@dhilt, пожалуйста, используйте адрес электронной почты: [email protected] и пароль: 12345678. Только что проверил в режиме инкогнито, он работает
@MontyGoldy Я не могу войти в систему из-за Request URL: http://localhost:3001/api/users/login, конечная точка не должна быть на локальном хосте, я думаю, иначе никто, кроме вас, не мог бы ее использовать
Да, я понял, что мне теперь делать ... Мне нужно развернуть серверную часть. Хорошо, я только что обновил маршруты до обычных маршрутов. Теперь вы можете получить доступ к "/ приборной панели"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
вам нужно перебирать все отзывы, когда вы уже знаете, что я обновил?
case actionTypes.UPDATE_FEEDBACK:
return {
...state,
feedbacks[action.payload.id]: action.payload.body
};
Это обновит только один элемент, потому что идентификатор является частью ключа. В том виде, в каком у вас есть сейчас, все отзывы будут заменены единственным значением, которое соответствует идентификатору.
Если вы планируете отправлять несколько идентификаторов, вам нужно использовать оператор распространения.
case actionTypes.UPDATE_FEEDBACK:
return {
...state,
feedbacks: {
...state.feedbacks,
...action.payload
}
};
В этом случае вы распределяете старые элементы обратной связи, а затем используете новую полезную нагрузку с оператором распространения, чтобы перезаписать только те, у которых совпадают идентификаторы.
Конечно, это означает, что action.payload должен соответствовать вашей структуре обратной связи.
спасибо за ответ. Если я попробую сделать так, как вы предложили, это приведет к синтаксической ошибке. Я не могу использовать его как «feedbacks [action.payload.id]». Кроме того, я поступаю правильно: если я найду конкретную обратную связь с помощью action.payload.id, тогда она обновит именно эту обратную связь, а не весь массив отзывов, поэтому я зацикливаюсь.
Хорошо, поэтому я нашел исправление, на самом деле, моя ссылка на идентификатор в редукторе была неправильной.
правильный путь
case actionTypes.UPDATE_FEEDBACK:
return {
...state,
feedbacks: state.feedbacks.map(
feedback =>
feedback._id === action.payload._id ? action.payload : feedback
)
};
Единственное, что, как я вижу, может вызвать такое поведение, - это строка в вашем редукторе:
feedback.id === action.payload.id ? action.payload : feedback. Если по какой-то причинеidбыл таким же, все текущие элементы были бы заменены текущим элементом, который вы редактируете, что вызвало бы эту ошибку. Вы подтвердили, что в этомmap()совпадает только отредактированный? И что всеidразные?