4-useState with Object

Time: 20200126

在前面的例子中，用的是数值型的变量，现在使用对象型变量。

import React, {useState} from 'react'

function HookCounterThree() {
    const [name, setName] = useState({firstName: '', lastName: ''})
    return (
        

            name: {name.firstName}, {name.lastName}
            

             {setName({firstName: "BING", lastName: "W"})}}>修改名字
        
    )
}

export default HookCounterThree

写个再复杂点的例子：

import React, {useState} from 'react'

function HookCounterThree() {
    const [name, setName] = useState({firstName: '', lastName: ''})
    return (
        

            {/*用于获取输入数据 */}
            

                 { setName({firstName: e.target.value})}}
                />
                 { setName({ lastName: e.target.value })}}
                />
            
            
名：{name.firstName}
            
姓：{name.lastName}
        
    )
}

export default HookCounterThree

这种写法能够实时显示更新，但是存在一个问题是，后者会覆盖前面的内容。

进入到第一个输入框，第二个输入框也会清空。

应该是setName时，数据没有按照匹配更新，导致另一个参数为空。

问题的原因：useState不会自动merge变化。

这和setState有一些不同。

所以我们用...操作符即可解决。

这个和reducer这里，传递action数据包效果是一样的，也需要对当前状态展开，然后再按照新的数据包修改。

如下：

   { setName({...name, firstName: e.target.value})}}
  />
   { setName({...name, lastName: e.target.value })}}
  />

这就是展开操作符的妙用。

END.