ReactJS 从子组件调用父函数不显示更新的父状态

Question

我正在尝试使用功能组件实现自定义多步骤登录功能。从父组件中，我传递了一个父状态挂钩和一个子组件应在表单提交时调用的函数，但是当子组件调用父函数时，它没有更新的状态（为空）。

 export default function() 
     {
       const [input, setInput] = useState({
                                           email: "",
                                           password: ""
                                          });
       function handleSubmitEvent(e)
        {
          e.preventDefault();
           /****************/
           console.log("handleSubmitEvent input"+input)
           return;
        };
                        
                        
        useEffect(() => {
                          console.log("useEffect input "+ input)
                          /*this shows the updated input
                          value correctly as the user 
                          fills the information*/
                         });
                
        const [ loginSteps, setLoginSteps] = useState(
         {
           steps:[
                  <CheckRegistry input={input} setInput={setInput} handleSubmitEvent={handleSubmitEvent}/>,
                  <CheckPassword/>
                 ],     
                  stepIndex:0 
         })
                    
       return (
               <div>
                <button onClick={handleSubmitEvent}></button>
                {/* if I click this button inside the parent 
                   the handleSubmitEvent shows the updated 
                   "input" state correctly
                 */}
                {loginSteps.steps[loginSteps.stepIndex]}
         </div>
        )
     }

关于我的孩子：

    export default function(props) 
    {
        
     const handleInput = (e) => 
                               {
                                const { name, value } = e.target;
                                props.setInput((prev) => ({
                                                           ...prev,
                                                           [name]: value,
                                                          }));
                               };
    
   return (
            <>
            <form onSubmit={(e) => {props.handleSubmitEvent(e)}}>
                            
            <input
                   className="email-input" 
                   type="email"
                   name="email"
                   onChange={handleInput}
             />
                <button></button> 
                {/* if I click this button inside the child 
                    the handleSubmitEvent is empty
                 */}
            </form>
            </>
        )
    }

这是怎么回事，请解释一下并提供正确的方法吗？

Answer 1

您不应该将步骤组件放入状态中 (

useState

)。

将组件移至

useState

声明之外。传递给组件的函数将仅执行它接收到的最新函数。其中，它接收到的第一个函数的

input

值为空字符串。

子组件会记住这个

handleSubmitEvent

函数：

function handleSubmitEvent(e) {
    e.preventDefault();
    /****************/
    console.log(input) // input value is {email: '', password:''}
    return;
};

父母接收并执行新的

input

状态值，但孩子只会执行旧函数，该函数存储空电子邮件和密码的值。

解决方案：

const steps = [
    <CheckRegistry input={input} setInput={setInput} handleSubmitEvent={handleSubmitEvent}/>,
    <CheckPassword/>
]
const [ loginSteps, setLoginSteps] = useState({     
    stepIndex:0 
})

将步骤移到

useState

之外应该可以解决您的问题。