时间戳

首页 > 解决方案 > 如果我有来自 React Hooks 中的父组件的道具，如何更新状态

javascript - 如果我有来自 React Hooks 中的父组件的道具，如何更新状态

问题描述

如果我有来自父组件的道具，我正在尝试获取更新的文本框值。

这是我的代码 -

const initialState = {
    name: "",
    age: 0
  }

const UserAdd = (props:any) => {
    const {selectedUser} = props;
    
    

    const [state, setState] = useState<any>(initialState);
    const dispatch = useDispatch();

    const onChangeValue = (event:any) => {
        const { name, value } = event.target;
        setState((prevState:any) => (
            { ...prevState, [name]: value }
            ));
    }

    

    const onSubmit = (e:any) => {
        e.preventDefault();
        const { name } = e.target;
        dispatch(addUser(state.name, state.age))
        setState({ ...initialState });
    }

    const onUpdate = (e:any) => {
        e.preventDefault();
        const { name } = e.target;
        console.log(state.name , state.age , "name-age")
    }
    
   

    return (
        <div className="add-user">
            <hr />
            <h2>Add User</h2>
            <hr />
            { selectedUser ? 
            (<form className="form-inline">
                <input type="text" className="form-control mb-2 mr-sm-5 col-md-4" id="email2" placeholder="Enter user name" name="name" value={selectedUser.name} onChange={onChangeValue} />
                <input type="text" className="form-control mb-2 mr-sm-5 col-md-4" id="pwd2" placeholder="Enter user age" name="age" onChange={onChangeValue} value={selectedUser.age} />
                    
                <button type="submit" onClick={onUpdate} className="btn btn-primary col-md-2 mb-2">Update</button>
            </form>)
            :
            (
                <form className="form-inline">
                <input type="text" className="form-control mb-2 mr-sm-5 col-md-4" id="email2" placeholder="Enter user name" name="name" value={state.name} onChange={onChangeValue} />
                <input type="text" className="form-control mb-2 mr-sm-5 col-md-4" id="pwd2" placeholder="Enter user age" name="age" onChange={onChangeValue} value={state.age} />
                    
                <button type="submit" onClick={onSubmit} className="btn btn-primary col-md-2 mb-2">Submit</button>
            </form>
            )
            }
        </div>
    )
}

export default UserAdd;

当没有道具，即（没有 selectedUser）时，状态更改工作正常，我也可以调度动作。但是当 Props(selectedUser) 可用时，我无法编辑文本框字段并且无法获取更新状态。请有人帮助我。

标签： javascriptreactjstypescript

解决方案

更深入地研究您的代码..当selectedUser不是虚假的时候有不同的形式......当有选定的用户时：

value={selectedUser.name}

应该像其他表单的输入一样：

value={state.name}

你还需要添加 useEffect 来改变 prop 改变时的状态，你可以这样做：

useEffect(()=>{
        setState((prevState:any) => (
              { ...prevState, name: selectedUser.name}
        ));
    },[selectedUser.name])

useEffect每当依赖项列表中的任何项目与上次渲染不同时（在这种情况下，每次更改 selectedUser.name 时）都会执行then

推荐阅读