React任务管理应用指定索引更新异常问题求助

问题根源 #

1. 输入更新容器仅在最后一个任务项后渲染（task.length -1 === index），导致更新按钮始终绑定最后一个任务的索引——无论点击哪个任务的更新按钮，最终执行更新时都会用最后一个索引。
2. 未保存点击的目标任务索引，handleTaskUpdate只能拿到最后一个任务的index，无法定位到要修改的目标任务。

修复步骤 #

1. 新增状态保存目标更新索引 #

在组件中添加状态，记录当前要更新的任务索引：

const [updateIndex, setUpdateIndex] = useState(null);

2. 修改UpdateTaskBtn函数，保存目标索引 #

点击更新按钮时，除了填充输入框，还要把当前任务的索引存入状态：

function UpdateTaskBtn(eachTask, index) {
    inputRef.current.value = eachTask;
    setUpdate(true);
    setUpdateIndex(index); // 记录要更新的任务索引
}

3. 调整输入更新容器的位置 #

把输入更新容器从map循环内部移到任务列表的外部，避免和最后一个任务绑定：

// 保留原来的任务列表渲染逻辑
return (
    <div className="task-app-container">
        {JsxElement}
        {/* 输入更新容器移至此处 */}
        <div className="input-update-container">
            <div className="input-area">
                <input
                    ref={inputRef}
                    type="text"
                />
            </div>
            <div className="btn-update-add-container">
                {update ?
                    <div className="btn-add" onClick={handleTaskUpdate}>Update Task</div>
                    :
                    <div className="btn-add" onClick={handleTask}>Add Task</div>
                }
            </div>
        </div>
    </div>
)

同时删除原map循环内的这段代码：

{task.length - 1 === index &&
    <div className="input-update-container">
        {/* ... 原输入容器代码 ... */}
    </div>
}

4. 修改handleTaskUpdate函数，使用保存的索引 #

更新任务时，用之前保存的updateIndex定位目标任务：

function handleTaskUpdate() {
    // 无目标索引时直接返回，避免无效操作
    if (updateIndex === null) return;
    
    const list = [...task];
    list[updateIndex] = inputRef.current.value;
    setTask(list);
    
    // 重置输入框与状态
    inputRef.current.value = "";
    setUpdate(false);
    setUpdateIndex(null);
}

验证效果 #

现在点击任意任务的Update按钮，输入框会填充对应任务内容，点击Update Task按钮后，将准确更新该任务对应的数组索引，不会再修改最后一个任务。

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