react的usestate如何变成同步的？

Question

usestate 里面的 set 方法是异步的，但是我想把他变成同步的，该怎么做？？

const [fields, setfields] = useState([0]);

function change() {
    setfields([22, 1])
    console.log(fields) // 我想这里直接获得 [22,1]
}

就是一个异步和同步的问题，怎么解决呢？

Answer 1

useEffect(() => {console.log(fields)}, [fields]);

试试

Answer 2

change => setfields => fields改变 => 组件从新render

是这样一个流程。

你想获得渲染后新的fields的值，你需要在useEffect中获取到。

Answer 3

react的setState是不能变成同步的, 不论是在函数组件或是class组件

setState({
    name: 'Ruofee'
}, () => {
    // setState回调函数
});

此处只是set state之后的一个回调, 实际上是等组件重新render再执行, 因此还是异步的
若是想监听useState某个值, 可以使用副作用钩子:

useEffect(() => {
    // 监听name变化
}, [name]);

需要知道的是, 初始化时useEffect总会调用一次

Answer 4

const syncProps = useRef(props)
useEffect(() => {
    syncProps.current = props
})

用ref去存只要Props一变就同步过去

Answer 5

写了几天demo 从vue转react，感觉react太难用了，更新一个变量也会异步，想修改一下入参，再请求，发现还是上一次的参数，vue的双向绑定不要太爽