react hooks 实际开发中遇到的问题

1、使用useState对空数组赋值后打印还为[]

demo:

let [arr, setArr] = useState([])

useEffect(() => {
    console.log('before change:', arr)
    let list = [{name: 'Lisa'}]
    setArr(list)
    console.log('after change:', arr)
}, [])

控制台输出：

可见数组赋值后还为[], 原因是setArr是异步函数，在useEffect中先执行同步语句，再执行异步语句，参考(Event Loop 事件循环机制);

解决办法一：

useEffect(() => {
    console.log('before change:', arr)
    let list = [{name: 'Lisa'}]
    arr = list  // 把list的指针赋值给arr,这样arr地址就变了
    setArr([...arr])
    console.log('after change:', arr)
}, [])

解决办法二：

<Button
    onClick={() => {
        let obj = {name: 'Lisa' + Math.random() * 10}
        arr.push(obj)
        setArr([...arr])
    }}>Click me</Button>

useEffect(() => {
    console.log('after change:', arr)
}, [arr])

使用useEffect()监听函数，监听arr的变化，可以获取改变后的arr;

2、不能在render函数中直接渲染对象

let [num, setNum] = useState({})

但是可以在render函数中渲染对象的属性：