React状态异常：文本框无法删除首个字符问题求助

问题根源 #

1. useEditRole的handleOnChange中，输入为空时仅更新验证状态，未同步更新data状态，导致输入框仍显示旧值
2. TextField的value逻辑data ? data : value会在data为空字符串时回退到初始的value（即initial），造成删除内容后自动恢复原始值
3. useEditRole未用传入的初始值初始化data，导致初始显示逻辑混乱

具体修复步骤 #

1. 修改useEditRole，接收初始值并同步空输入的data状态

export const useEditRole = (id: number, initialValue: string) => {
    const notify = useNotify()
    const [inputValidation, setInputValidation] = useState({input: false, button: true})
    // 用传入的初始值初始化data
    const [data, setData] = useState(initialValue)

    const handleOnClickSubmit = async () => {
        await fetchCreateRole(data, "PUT", id).then((res: any) => {
            notify("Successfully Updated!")
        });
    }

    const handleOnChange = (e: any) => {
        const inputValue = e.target.value;
        // 无论输入是否为空，都同步更新data
        setData(inputValue);
        if(inputValue) {
            setInputValidation({ input: false, button: false})
        } else {
            setInputValidation({ input: true, button: true})
        }
    }

    return { inputValidation, handleOnChange, handleOnClickSubmit, data, setData }
}

2. 在Edit组件中调用useEditRole时传入初始值

export const Edit = (props: any) => {
    const { initial } = usefetchEditUserType(props)

    return (
        <>
            <CreateUpdate
                title="Edit User Type"
                // 传入initial作为useEditRole的初始值
                useMutationHooks={useEditRole(props.id, initial)}
                editPermission={true}
                id={props.id}
            />
            <ListAssignUserAccount {...props} />
        </>
    );
};

3. 简化CreateUpdate中TextField的value绑定

<CardContent >
    <TextField
       required
       //...省略其他代码
        onChange={(e: any) => handleOnChange(e)}
        error={inputValidation['input']}
        helperText={inputValidation['input'] ? "Required*" : ""}
        // 直接绑定data，因为data已正确初始化并同步更新
        value={data}
    />
</CardContent>

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