javascript - React 组件未根据 redux 状态存储中的映射(数据结构)更改进行更新

Question

我有一个存储在 redux 状态存储中的 map 和一个渲染我存储在 map 中的值的 react 组件。现在，当我从此映射中添加/删除值时，我的 react 组件不会使用最新的更改进行 self 更新。

注意:我看到我们可以使用 mobX 模块来监听映射(或数组以外的其他数据结构)的变化，但我不想使用其他模块来实现这个。

我的 Redux 商店

const initialState = {
    myNotes = new Map();
}

我的 reducer

case CREATE_NEW_NOTE:
      const { noteAdded, success } = action.payload;
      let newOwnerNotes = state.myNotes;

      newOwnerNotes.set(noteAdded.note_id, noteAdded);

      if (success) {
        return {
          ...state,
          myNotes: newOwnerNotes
        };
      } else {
        return {
          ...state
        };
      }
case DELETE_NOTE:
      const noteIdToDelete = action.payload.note_id;
      const { success } = action.payload;
      let newState = Object.assign({}, state);

      if (success) {
        newState.myNotes.delete(noteIdToDelete);
        return {
          ...newState
        };
      } else {
        return {
          ...state
        };
      }

我的 react 组件

import React from "react";
import { connect } from "react-redux";

// Components
import Notes from "../notes/Notes";
import Heading from "./Heading";

class Owner extends React.Component {
  render() {
    const { myNotes } = this.props;
    debugger;
    return (
      <div className="notes-owner">
        <div className="notes-owner-header">
          <Heading owner={true} />
        </div>
        <div className="notes-owner-content">
          {[...myNotes].map(([key, note]) => {
            return (
              <Notes note={note} owner={true} key={note.note_id}>
                {note.title}
              </Notes>
            );
          })}
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    myNotes: state.notes.myNotes
  };
};

export default connect(
  mapStateToProps,
  {}
)(Owner);

Answer 1

你不应该使用Map，至少不应该像这样。你正在改变国家。看这一行:

  let newOwnerNotes = state.myNotes;

  newOwnerNotes.set(noteAdded.note_id, noteAdded);

您只是引用同一个对象。尝试这样:

  let newOwnerNotes = new Map(state.myNotes);

  newOwnerNotes.set(noteAdded.note_id, noteAdded);

您应该始终记住，数组、对象、映射都是引用类型，请查看以下代码片段:

const arr = [1,2,3,4,5]
const copy = arr
const realCopy = [...arr]
console.log(copy, realCopy) //[1,2,3,4,5],[1,2,3,4,5]
console.log(copy === arr) //true
console.log(realCopy === arr) //false

当您只是像 const copy = arr 这样分配时，您不会创建另一个数组，您只是引用同一个对象，但在第二种情况下(使用扩展运算符)您正在创建另一个数组其中包含来自 arr 的所有项目的分布。查看更多关于 immutability in JS在这里。

当您执行 const newNotes = new Map(state.myNotes) 时，您正在创建另一个对象，现在您进行修改，最后: return {...state, myNotes : newOwnerNotes};