reactjs - react Redux : Update and replace records with another records returns value of 1

Question

React Redux:更新记录并将其替换为其他记录返回值 1。

在服务器端，我有一个 json 响应[{"id":"10", "food_name":"Rice"}]

下面的代码可以正常工作，通过 API 调用从数据库显示名为 Rice 的食品，如上面的 json 数组所示。

现在我需要将显示的食品大米替换为 bean 类。

为此，我有一个 json 文件，将在发布后通过 API 调用返回

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

我还创建了一个 Post 按钮，该按钮应将数据发送到服务器端并返回响应 Bean。

这是我的努力以及由 reducer 引起的问题。

如果在reducer中实现下面的代码

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

代码工作正常，并且由于我在 reducer 中设置了 value beans，所以 Rice 被替换为 Beans。

但是由于我需要通过 API 调用获取记录，所以如果实现

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

我得到的值(value)是1，取代了大米而不是 bean 。请问1这个值是从哪里来的？ 我需要让 beans 替换记录 Rice 作为从 API 调用返回的值。 我的操作和服务代码没问题，因为我可以看到数组中返回的 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 };

reducer 代码

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