React随记：React常见报错及解决方案

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

前言

一、报错一

二、报错二

总结

---

前言

记录下React报错及解决方案，仅此而已

---

一、报错一

react_devtools_backend.js:4012 Warning: A component is changing 
a controlled input to be uncontrolled. This is likely caused by 
the value changing from a defined to undefined, which should not
 happen. Decide between using a controlled or uncontrolled input 
element for the lifetime of the component. More info: /link/controlled-components

场景：函数式组件，使用userState初始化和更新数据。input框输入数据时，更新userState的初始数据 userName.

代码示例:

export default function LoginPage(props) {
    const [state, setState] = useState({
            userName: "",//用户名
            phoneNum: "",//手机号
         
     })

    function changeUserCode(event) {
       setState({userName:)
    }
    return (
        <div className='login-page'>
            <div className='login-content' >
                  <label>工号 </label><span></span>
                    <input 
                       placeholder='请输入用户名'
                       value={} 
                       onChange={changeUserCode} >
                    </input>
            </div>
        </div>  
    )
}

})

解决方案：不能直接修改userName值。解构state赋给新的对象newstate，修改newstate对象的userName值。再将state对象更新为新对象newstate

    function changeUserCode(event) {
        let newstate = { ...state }
         = 
        setState(newstate)
    }

二、报错二

React Hook "useNavigate" is called in function "jumpHomePage" 
that is neither a React function component nor a custom React 
Hook function. React component names must start with an 
uppercase letter. React Hook names must start with the word "use" 

场景：函数式组件，定义一个jumpHomePage函数，在获取后台数据成功后，使用编程式路由跳转到指定页面

代码如下（示例）：

function jumpHomePage(){
        /* ReactRouter6编程式路由跳转: 
             1、引入 useNavigate：
                import { useNavigate } from 'react-router-dom'
             2、使用navigate跳转：
                navigate("/home")
        */ 
        const navigate = useNavigate()
        navigate("/home")
       
    }

解决方案：     const navigate = useNavigate() 不能声明子方法体内，应该在方法外定义为组件的属性。

代码如下（示例）：

const navigate = useNavigate()
function jumpHomePage(){
        /* ReactRouter6编程式路由跳转: 
             1、引入 useNavigate：
                import { useNavigate } from 'react-router-dom'
             2、使用navigate跳转：
                navigate("/home")
        */ 
        navigate("/home")
       
    }

---

总结

解决报错就是一个经验问题，遇到了并解决掉。记录下，下次遇到就知道如何处理。