redux状态已更新，但未触发页面更改（重新呈现）

Question

我见过下面的艺术品，但我的问题不同了

http://redux.js.org/docs/faq/ReactRedux.html#react-not-rerendering

React-redux store updates but React does not

My Redux state has changed, why doesn't React trigger a re-render?

Chrome redux扩展程序显示存在差异（因此不会通过状态变异重新渲染）：

但重新渲染而不是跳跳虎。

我使用react-boilerplate作为基础，我正在使用Immutable.js

减速器：

const initialState = fromJS({
  tags: [
    {
      id: 1,
      name:'t1',
      hexcolor: '#ccc',
      shortcut: 'ctrl+1',
      desc :'desc'
    }
  ],
});

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_TAGS_SUCCESSED:
      return state.set('tags', action.tags)
    case ADD_TAG_SUCCESSED:
      return state.update('tags', arr => arr.push(action.tag))
    default:
      return state
  }
}

选择器

import { createSelector } from 'reselect';

export const selectTagPage = (state) => state.get('tagPage');

export const makeSelectTags = () => createSelector(
  selectTagPage,
  (state) => state.get('tags') && state.get('tags').toJS()
);

TagPage（Index.js）

export class TagPage extends React.PureComponent { 

  render() {
    const {tags, corpusId } = this.props;

    return (
      <div>
        <TagTable data={tags} {...this.props} ></TagTable>
      </div>
    );
  }
}

const mapStateToProps = createStructuredSelector({
  tags: makeSelectTags(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    requestTags: (corpusId) =>
    dispatch({ type:REQUEST_TAGS, corpusId }),
    updateTag: (id, new_tag) =>
    dispatch({ type: UPDATE_TAG, id , new_tag }),
    addTag: (tag) =>
    dispatch({ type: ADD_TAG, tag }),
    deleteTag: (tag) =>
    dispatch({ type: DELETE_TAG, tag }),
  };
}

const ConnectedTagPage = allCompose('tagPage', saga, reducer, mapStateToProps, mapDispatchToProps)(TagPage)

ConnectedTagPage.defaultProps = {
  tags: [],
}

export default ConnectedTagPage;

TagTable（TagPage＆＃39; s child）

class TagTable extends React.PureComponent {

  constructor(props) {
    super(props);

  }

  render() {
    const {classes, data, tagColormap, updateTag, addTag, deleteTag } = this.props;
    const trigger = <Button raised primary>新增</Button>

    return (
      <div>
        <TagSubmitDialog title={'TAG'} trigger={trigger} obj={null} handleSubmit={(tag) => addTag(tag)} ></TagSubmitDialog>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>名称</TableCell>
              <TableCell>色值</TableCell>
              <TableCell>快捷键</TableCell>
              <TableCell>备注</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data && data.map((n) => {
              return (
                <TableRow key={n.id}>
                  <TableCell>
                    {n.name}
                  </TableCell>
                  <TableCell>
                    {n.hexcolor}
                  </TableCell>
                  <TableCell>
                    { n.shortcut}
                  </TableCell>
                  <TableCell>
                    { n.desc}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>

      </div>
    );

  }

}

无论状态如何变化，TagTable都不会改变。

调试细节：

选择更改：

页面也会获得新标签：

表获取新标签：

Answer 1

好的，我发现因为<TableRow key={n.id}>。

我有一个标识为1的初始数据，我的测试数据ID也是1。 因此，由于反应不允许相同的密钥...