Question

因此，无论我做什么，当我将一个项目添加到redux存储中的数组时，都无法刷新组件。

我在reducer中用来添加到redux状态的内容：

case ADD_NOTE_META:
  return [
    ...state,
    action.note,
  ];

连接器：

import { connect } from 'react-redux';
import NoteSection from './NoteSection.component';

const mapStateToProps = state => ({
   notes: state.NotesMeta,
});

const mapDispatchToProps = () => ({});

export default connect(
   mapStateToProps,
   mapDispatchToProps,
)(NoteSection);

组件：

import React from 'react';

import PropTypes from 'prop-types';
import NoteSelectorContainer from './noteselector/NoteSelector.connector';
import DeleteConfirmationMessage from './deletenoteconfirmationmessage/DeleteConfirmationMessage.connector';

function NoteSection(props) {
  const { notes } = props;

  return (
    <div id="divSelectNoteContainer">
      {notes.map(item => (
        <NoteSelectorContainer
          note={item}
          key={item.id}
        />
      ))}
      <DeleteConfirmationMessage />
    </div>
  );
}

NoteSection.defaultProps = {
  notes: [],
};

NoteSection.propTypes = {
  notes: PropTypes.array,
};

export default NoteSection;

redux中的状态结构如下：

{
NotesMeta: [
    {
      id: '5b6cd6c49a46d',
      title: 'folder note',
      tags: [
        'test'
      ],
      parentid: '5b6cd6c49a48d'
    },
    {
      id: '5b6cd6c496ad2',
      title: 'test note',
      tags: [],
      parentid: null
    },
]
}

运行添加新注释之前的console.log（注释）输出：

0: {id: "5b6cd6c49a46d", title: "folder note", tags: Array(1), parentid: "5b6cd6c49a48d"}
1: {id: "5b6cd6c496ad2", title: "test note", tags: Array(0), parentid: null}

之后：

0: {id: "5b6cd6c49a46d", title: "folder note", tags: Array(1), parentid: "5b6cd6c49a48d"}
1: {id: "5b6cd6c496ad2", title: "test note", tags: Array(0), parentid: null}
2: {id: "5bb48aaae94c1", title: "New Note Title", tags: Array(0)}

我可以看到在redux存储和Notesection道具中都添加了新笔记，但是从未创建新的NoteSelectorContainer。

当添加到数组时，React Redux不更新组件

0 个答案: