点击Login按钮调用setState后React组件未重新渲染求助

你的代码里有三个核心问题导致state未更新、组件不渲染：

1. 未实现onInputChange函数，输入框无法同步更新state #

原来的onInputChange是空函数，用户输入时state根本没变化，后续清空操作自然看不到效果。要正确更新对象类型的state，需要先展开原有state，再修改对应字段：

const onInputChange = (event) => {
  const { name, value } = event.target;
  setUser(prev => ({ ...prev, [name]: value }));
}

2. 输入框用了defaultValue（非受控组件），state变化不会同步到输入框 #

defaultValue只会初始化输入框一次，后续state变化不会触发输入框更新。改成value绑定state，让输入框成为受控组件：

<input 
  type="number" name="prn"
  value={user.prn}
  onChange={onInputChange}
/>
<!-- 密码输入框同理 -->
<input 
  type="password" name="password"
  value={user.password} 
  onChange={onInputChange}
/>

3. console.log(user)在setUser后立刻执行，打印的是旧值 #

React的useState setter是异步操作，调用setUser后不会立刻更新user变量。如果要查看更新后的state，用useEffect监听：

import React, { useState, useEffect } from 'react';

// ... 其他代码

useEffect(() => {
  console.log('当前user state:', user);
}, [user]);

修改后的完整代码 #

import React, { useState, useEffect } from 'react';

function Login() {
  const [user, setUser] = useState({
    prn: "",
    password: ""
  });
  
  const doLogin = () => {
    alert("Welcome " + user.prn + " " + user.password);
    setUser({
      prn: "",
      password: ""
    });
  }

  const onInputChange = (event) => {
    const { name, value } = event.target;
    setUser(prev => ({ ...prev, [name]: value }));
  }

  useEffect(() => {
    console.log('当前user state:', user);
  }, [user]);

  return (
    <div className='login'>
      <input 
        type="number" name="prn"
        value={user.prn}
        onChange={onInputChange}
      />
      <br /> <br />
      <input 
        type="password" name="password"
        value={user.password} 
        onChange={onInputChange}
      />
      <br /> <br />
      <input type="button" value="Login" onClick={doLogin} />
    </div>
  );
}

export default Login

这样修改后，点击Login按钮弹出提示后，state会被清空，输入框也会同步变成空值，组件会正常重新渲染。

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