React Render Map最后一个元素不更新答案

【问题标题】：React Render Map last element doesnt updateReact Render Map最后一个元素不更新
【发布时间】：2017-04-28 06:20:09
【问题描述】：

地图中的最后一个文件组件不反映状态更改，它事件不调用 shouldComponentUpdate。在更改其他文件组件（但最后一个）之后，除了最后一个之外，所有这些都反映了更改，并且每个调用 shouldComponentUpdate。

在渲染方法中的 React 组件中我使用这个：

{this.props.files.map((file,index)=>{
    return (
        <FileComponent type="upload" key={index} index={index} />
    )
})}

在 FileComponent 我有带有 onClick 功能的按钮：

this.props.dispatch({type: "EDIT_FILE", payload: this.props.index});
    // SOME STRANGE BEHAVIOUR
    // if(this.props.index+1 == this.props.files.length){
    //     this.forceUpdate();
    // }

我的减速器包含：

function getInitialState(){
   return {
    files:  [
        {name: 'asd.doc', in_edit: false,
            file: {type:'image/png', size:123123, lastModifiedDate:new Date()}
        },
        {name: '22.doc', in_edit: false,
            file: {type:'image/png', size:123123, lastModifiedDate:new Date()}
        },
        {name: 'as33d.doc', in_edit: false,
            file: {type:'image/png', size:123123, lastModifiedDate:new Date()}
        },
        {name: '44.doc', in_edit: false,
        file: {type:'image/png', size:123123, lastModifiedDate:new Date()}
        },
    ]
}
}

export default function (state = getInitialState(), action) {
switch (action.type) {

 case "EDIT_FILE":
        state.files[action.payload]['in_edit'] = !state.files[action.payload]['in_edit'];
        return Object.assign({}, state);
default:
        return state
}
}

包.json：

"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-dropzone": "^3.7.3",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
"redux": "^3.6.0",

是否足以理解我的问题？

【问题讨论】：

你的 reducer 改变了状态，然后你只改变对状态本身的引用，而不是对你的文件的引用。所以 redux 不知道你改变了一个文件。
附带说明，您不应将索引用作 map 中的键，而应使用数据的唯一 ID（请参阅：medium.com/@robinpokorny/…）
@mbernardeau 谢谢，我准备上传文件到服务器，在这一步我没有唯一的 id，文件名也不是唯一的。

标签： javascript reactjs

【解决方案1】：

解决方案是更改reducer代码以参考文件而不是整个状态来操作：

case "EDIT_FILE":
        let files = state.files.slice(0);
        files[action.payload]['in_edit'] = !files[action.payload]['in_edit'];

        return Object.assign({}, state, {files:files});

【讨论】：