Question

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

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

下面的代码可以通过API调用从数据库中显示名为米饭的食品，如上面的json数组所示。

现在我有一个要求，将显示的食品米替换为豆。

为此，我有一个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' };
          }

该代码运行良好，并且大米被 Beans 代替，因为我在reducer中设置了值bean。

但是由于我需要通过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 。 1 的值来自哪里。我需要让bean替换记录Rice作为API调用返回的值。我的操作和服务代码还可以，因为我可以看到数组中的json返回的记录按照

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

我认为我的问题出在这行代码下面，该行返回的值是1 insta的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 };
}

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

1 个答案: