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

Question

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

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

下面的代码通过API调用从数据库中显示一个名为Rice的食物，如上面的json数组所示。

现在我有一个要求，用豆类替换显示的食物项目大米。

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

[{"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，因为我在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的值来自哪里。我需要让beans代替记录Rice作为API调用返回的值。我的操作和服务代码还可以，因为我可以看到数组中根据返回的json记录

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

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

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