在 Redux 中替换数组中没有状态突变的对象

Question

我正在尝试编辑一个对象并使用 React 和 Redux 将其替换为数组，如下所示：

case EDIT_LANGUAGE:
let languages = [...state.languageSkills];
languages[languages.findIndex(el => el.id === action.payload.id)] = action.payload;
return {
...state,
languageSkills: languages
};

"语言"数组在返回语句之前查找，但状态不会重新呈现。我想我以某种方式变异状态。其他操作(删除、获取、设置(工作正常。有什么提示吗？

编辑。这是应呈现的组件的相关部分

import { setLanguages, getLanguages } from '../../actions';
import {connect} from 'react-redux';
import {bindActionCreators} from "redux"
import React, { Component } from 'react';
class UserProfile extends Component {
constructor(props) {
super(props);
}
render() {   
const languageSkillItems = this.props.languageSkills.map((languageSkill) => {
return (
<LanguageSkillItem key={languageSkill.id} item={languageSkill} />
)
});
return (
<div className="profile">            
<Language languageSkillItems={languageSkillItems} />            
</div>
)
} 
}
const mapStateToProps = (state) => {
return {
languageSkills: state.languageSkills
};
};

const mapDispatchToProps = dispatch => {
return {
...bindActionCreators({ setLanguages, getLanguages }, dispatch)
}
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserProfile
);

Answer 1

你需要创建一个新的数组引用，最简单的方法就是使用map，像这样：

case EDIT_LANGUAGE:
const languageSkills = state.languageSkills.map(el => {
if(el.id === action.payload.id) {
return action.payload;
}
return el;
});
return {
...state,
languageSkills
};