时间戳

首页 > 解决方案 > React Redux：用另一个记录更新和替换记录返回值1

reactjs - React Redux：用另一个记录更新和替换记录返回值1

问题描述

React Redux：用另一个记录更新和替换记录返回值 1。

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

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

现在我需要用Beans替换显示的食物项目Rice。

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

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

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

这是我的努力以及由减速器引起的问题。

如果在 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' };
          }

由于我在减速器中设置了值 bean，因此代码工作正常，并且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};
          }

我得到1的价值来代替Rice而不是Beans。请问这个值1是从哪里来的。我需要让 bean 替换记录 Rice 作为从 API 调用返回的值。我的操作和服务代码没问题，因为我可以看到数组中的 json 返回记录按照

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

我认为我的问题在于下面这行代码，它返回值为 1 instaed of 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
  }
}

标签： reactjsredux

解决方案

您需要替换正在起作用的价值，但您正在从状态中挑选

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

推荐阅读