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

'languages' 数组在 return 语句之前查找 find，但不会重新呈现状态。我想我正在以某种方式改变状态。其他操作（删除、获取、设置）工作正常。有什么建议吗？

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

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