React Redux: обновление и замена записей другими записями возвращает значение 1

Question

React Redux: обновление и замена записей другими записями возвращает значение 1.

На стороне сервера у меня есть ответ json [{"id":"10", "food_name":"Rice"}]

Приведенный ниже код работает нормально, отображаяэлемент питания с именем Rice из базы данных через API Call, как показано в массиве json выше.

Теперь у меня есть требования заменить отображаемый элемент питания Rice на Фасоль .

Для этого у меня есть файлы json, которые должны быть возвращены через API Call после публикации

[{"id":"10", "food_name":"Beans"}]

Я также создал кнопку Post, которая должна отправлять данные на сервер ивернуть ответ. Beans.

Вот мои усилия, а также моя проблема, вызванная редуктором.

Если реализовать приведенный ниже код в редукторе

case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
          }

Код работает нормально, и Rice заменяется на Beans , так как я устанавливаю значения bean в редукторе.

, но так как мне нужно получать записи через API Call, так что если реализуем

case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
          }

Получаю значение 1 , заменяющее Рис вместо Beans .Пожалуйста, откуда берется это значение 1 .Мне нужно, чтобы bean-компоненты заменяли запись Rice как значение, возвращаемое из API Call.Мой код действия и службы в порядке, так как я вижу записи, возвращенные json в массиве, согласно

[{"id":"10", "food_name":"Beans"}]

Я думаю, что моя проблема заключается в следующей строке кода, которая возвращает значение 1 вместо Beans.

return { ...food1, food_name: state.items[0].food_name};

Вот полный код

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';

class App extends React.Component {

constructor(props) {
        super(props);
this.state = {};

    }
    componentDidMount() {
this.props.dispatch(foodActions.getFood());
    }

 handleFood(id,food_type) {
    return (e) => this.props.dispatch(foodActions.postfood(food_id));

    }

    render() {
        const { food1, foods1 } = this.props;
        return (
            <div>           
   {foods1.items &&
                    <ul>
                        {foods1.items.map((food1, index1) =>
                            <li key={food1.id}>
                                {food1.food_name} 
<input type="button" value="Post and Update Food Name"  onClick={this.handleFood(food1.id)}  />
</li>
                        )}

                    </ul>
                }
            </div>
        );
    }
}
function mapStateToProps(state) {

    const { foods1} = state;
    const { food1 } = state;
    return {
        food1, foods1
    };
}

const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };

Код редуктора

import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
  switch (action.type) {

case foodConstants.GETALL_REQUEST:
  return {loading: true};
case foodConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
items: action.foods1,
  };
case foodConstants.GETALL_FAILURE:
      return { 
        error: action.error
      };


// Post and Update Food Name

 case foodConstants.FOOD_REQUEST_POST:
 return {...state};
 case foodConstants.FOOD_SUCCESS_POST:
 return {
items: state.items.map(food1 => {
        if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};

          }

          return food1;
        })
      };
    case foodConstants.FOOD_FAILURE_POST:
 return { 
        error: action.error
      };

    default:
      return state
  }
}

Answer 1

Вам нужно заменить значение, которое приходит в действие, но вы выбираете из состояния

case foodConstants.FOOD_SUCCESS_POST: {

  const updatedItems = state.items.map((food1) => {
    if (food1.id === action.id) {
      return { ...action };
    }

    return food1;
  });
 return { ...state, items: updatedItems };
}

Или вы также можете сделать это

case foodConstants.FOOD_SUCCESS_POST: {

  let updatedItems = { ...state.items };
  const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);

  if(itemIndex > -1){
    updatedItems[itemIndex] = {
        ...updatedItems[itemIndex],
        ...action,
    }
  }

 return { ...state, items: updatedItems };
}