React Redux项目中DisplayChooseMovie输入框无法编辑问题求助

核心问题：输入框值不更新的原因 #

输入框无法修改的主要原因是缺少key属性。在DisplayChooseMovie.jsx的map循环中，渲染的<div>没有设置唯一key，导致React无法准确识别元素变化，即使Redux状态已更新，UI也不会同步刷新。

修复步骤 #

1. 为循环元素添加唯一key

修改DisplayChooseMovie.jsx中的tableRows函数，给包裹输入框的<div>添加key={info.id}：

const tableRows =(records)=> 
  records.map((info,num) => {
      return (
       info.displayOneMovie && (
      <div key={info.id}> {/* 新增key属性 */}
        <input type="text" maxLength="100" value={info.id}></input><br></br>  
        <input type="text" name="moviesName" id="moviesName" value={info['movie name']} onChange={(event)=>{dispatch(saveMovieChangeName({"id":info.id, "movie name": event.target.value }))}}></input><br></br>
        <textarea id="changeMovieDescription" rows="10" cols="20" value={info.description}></textarea><br></br>
        <input type="text" id="changeMovieGenre" value={info.genre}></input><br></br>
        <input type="text" id="changeLeadActor" value={info['lead actor']}></input><br></br>
        <input type="text" id="changeRating" value={info.rating}></input><br></br>
        <input type="text" id="changeMovieLanguage" value={info.language}></input>
      </div>
      ))
  }) 

2. 修复多选编辑的问题（推荐）

当前showSelectMovieForEdit reducer只会将选中的电影设为可编辑，但不会取消其他电影的编辑状态，导致多个电影同时显示编辑界面。修改recordSlice.js中的该reducer：

showSelectMovieForEdit: function(state,action){
    // 遍历所有电影，仅将选中的设为可编辑，其余设为不可编辑
    state.value.forEach(item => {
        item.displayOneMovie = item.id === action.payload;
    });
},

3. 其他输入框添加编辑支持（可选）

如果需要让其他字段（如描述、类型等）也能编辑，需为它们添加onChange事件并对应修改reducer。例如，为描述字段添加处理：

• 在recordSlice.js中新增reducer：

saveMovieChangeDescription: function(state,action){
    const targetItem = state.value.find(item => item.id === action.payload.id);
    if(targetItem){
        targetItem.description = action.payload.description;
    }
},

• 导出该action：

export const { showSelectMovieForEdit, saveMovieAfterEdit, saveMovieChangeName, saveMovieChangeDescription } = recordSlice.actions;

• 在DisplayChooseMovie.jsx中更新textarea：

<textarea id="changeMovieDescription" rows="10" cols="20" value={info.description} onChange={(event)=>{dispatch(saveMovieChangeDescription({"id":info.id, "description": event.target.value }))}}></textarea>

验证修复 #

完成上述修改后，点击编辑复选框选中电影，在名称输入框中输入内容，即可看到值实时更新。同时每次只会显示一个电影的编辑界面，避免混乱。

内容的提问来源于stack exchange，提问作者tmang