react useState 不能及时更新渲染的解决方法

之前一直觉得useState很好用，直到遇到莫名其妙的坑，useState不起作用了。

很简单一个需求，input，onchange获取value值，开始以为这样写就可以了。

const [value, setValue] = useState("");

onChange = e => setValue(e.target.value)

<Input value={value} onChange={onChange} />

结果，输入数据的时候，debugger，开始是输入了内容，最后被置空了，导致输入不进去。

找了很多方法，比如用useEffect，useRef等。这里找到一篇文章，可以为以后的做参考

React函数式组件使用Ref

子组件与父组件用 ref实现双向绑定，方法很直观，我用到我例子里面，就感觉好复杂。只是简单的一个需求，搞这么多代码，而且有时候还不起作用。

const [value, setValue] = useState("");
onChange = e => {
useEffect(() => {    
    setValue(e.target.value);   
    }, [value]);
}
<Input value={value} onChange={onChange} />

同事说，用不受控组件啊，如果这里用了form也可以直接获取到，还有什么更简单的方法呢？

<Input id="input" /> 
const deleteValue = document.getElementById("input").value

哈哈，搞定，够简单，完成了需求，用原始的js获取value。

有时候，要搞清楚你最终想实现的结果，开始我就是陷入去解决useState的问题，浪费了很多时间，跳出来想，反而简单了。

如果有更好的方法，欢迎留言评论！