react-redux结合react-hook-form表单提交生成对象ID重复如何解决？

问题原因 #

问题确实和你猜测的一致，uuidv4()放在useForm的defaultValues中时，只会在组件首次渲染时执行一次，生成的ID会被后续所有表单提交复用，因此所有新增元素ID都相同。而且你的表单中没有ID对应的输入字段，完全不需要将ID放在表单默认值里。

修复方案 #

提交表单时再生成新ID插入到表单数据中即可，修改后的完整代码如下：

import React from "react";
import { v4 as uuidv4 } from "uuid";
import { useForm } from "react-hook-form";
import { connect } from "react-redux";
import { addTodos } from "../redux/reducer";

const mapStateToProps = (state) => ({
    todos: state,
});

const mapDispatchToProps = (dispatch) => ({
    addTodo: (obj) => dispatch(addTodos(obj)),
});

const TodoForm = (props) => {
    const { register, handleSubmit, reset } = useForm({
        defaultValues: {
            name: "",
            date: "",
            done: false,
        },
    });

    const onSubmit = (data) => {
        // 每次提交时生成全新ID
        const newTodo = {
            ...data,
            id: uuidv4()
        };
        props.addTodo(newTodo);
        // 可选：提交后重置表单方便下次输入
        reset();
    };

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input
                type="text"
                placeholder="Name"
                name="name"
                {...register("name", { required: true })}
            />
            <input
                type="date"
                placeholder="Date"
                name="date"
                {...register("date", { required: true })}
            />

            <input type="submit" />
        </form>
    );
};

export default connect(mapStateToProps, mapDispatchToProps)(TodoForm);

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