Я пытаюсь отредактировать объект и заменить его в массиве с помощью 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, но состояние не отображается повторно. Думаю, я как-то мутирую состояние. Другие действия (удалить, получить, установить) работают нормально. Какие-нибудь советы?

РЕДАКТИРОВАТЬ. Это релевантная часть компонента, которая должна отображать

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

);
0
JohnP 11 Сен 2018 в 22:51

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
  };
3
dashton 11 Сен 2018 в 20:48