Question

背景：

我遵循了this tutorial，并使用React钩子构建了一个可以正常工作的CRUD应用程序。从本教程中的代码开始，我想将每个视图中的状态组件分解为一个类。我这样做的原因是创建一个可重用的，静态类型的viewmodel对象。

问题：

在AddUserForm.tsx中，我正在处理功能handleInputChange中的输入更改。我正在使用VS Code调试器逐步执行代码，并且得到了这种奇怪的行为：我在调用setCurrentUser的行上放置了一个断点，但是当我开始调试时，该断点将移至紧跟的大括号（所有代码文件均保存到磁盘，并且该应用程序内置于TS中）。由于某些原因，setCurrentUser永远不会执行。

AddUserForm.tsx

const AddUserForm = (props :any) => {
  
    const vm: UserViewModel = props.vm as UserViewModel;

    const handleInputChange = (event:any) => {
        const vm2 = vm; // closure
        const { name, value } = event.target;
        vm2.setCurrentUser({...vm2.currentUser, [name]:value});  // problem here.  the call to setCurrentUser does not execute.
    }

    return (
        <form onSubmit={event => {
            event.preventDefault();
            
            if(! vm.currentUser.name || ! vm.currentUser.username)
                return;

            vm.addUser(vm.currentUser);
            vm.setCurrentUser(new user());

        }}>
            <label>Name</label>
            <input type="text" name="name" value={vm.currentUser.name} onChange={handleInputChange}></input>
            <label>Username</label>
            <input type="text" name="username" value={vm.currentUser.username} onChange={handleInputChange}></input>
            <button>Add new user</button>
        </form>
    )
}
export default AddUserForm;

UserViewModel.tsx

export default class UserViewModel
{
    public currentUser: user;
    public users: user[];
    public editing : boolean;
    public setUsers : any;    
    public setCurrentUser : any;
    public setEditing : any;
    
    constructor() {

        const usersData: user[] = [
            {id:1, name:'Tania', username:'floppydiskette'},
            {id:2, name:'Craig', username:'siliconedolon'},
            {id:3, name:'Ben', username:'benisphere'}
          ];
        this.editing = false;
        this.users = usersData;
        this.currentUser = new user();
        this.setCurrentUser = useState<user>(this.currentUser)[1];
        this.setUsers = useState<user[]>(this.users)[1];
        this.setEditing = useState<boolean>(this.editing)[1];
    }

    public addUser: (usr:user) => void = (usr :user) => {
        usr.id = this.users.length + 1;
        this.setUsers([...this.users, usr]);
    };
            
    public editUser: (user:user) => void = (user:user) => {
        this.setEditing(true);
        this.setCurrentUser(user)
    };
            
    public updateUser: (updatedUser:user) => void = (updatedUser:user) => {
        this.setEditing(false);
        this.setUsers(this.users.map((user) => (user.id === updatedUser.id ? updatedUser : user)));
    };
            
    public deleteUser: (id:number) => void = (id:number) => {
        this.setEditing(false);
        this.setUsers(this.users.filter((user) => user.id !== id));
    
    };
}

Before debugging

Answer 1

useState是一个钩子，仅在函数组件中起作用，而不在类组件中起作用。

请参阅https://reactjs.org/docs/hooks-state.html

另外，您的“ viewModel”应该仅是数据和代码。就React而言，它没有任何“状态”。在这种意义上，只有React组件具有状态。

反应不调用useState

1 个答案: