4-useState with Object

Time: 20200126

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

import React, {useState} from 'react'

function HookCounterThree() {
    const [name, setName] = useState({firstName: '', lastName: ''})
    return (
        <div>
            name: {name.firstName}, {name.lastName}
            <br />
            <button onClick={() => {setName({firstName: "BING", lastName: "W"})}}>修改名字</button>
        </div>
    )
}

export default HookCounterThree

写个再复杂点的例子：

import React, {useState} from 'react'

function HookCounterThree() {
    const [name, setName] = useState({firstName: '', lastName: ''})
    return (
        <div>
            {/*用于获取输入数据 */}
            <form>
                <input type="text" 
                       value={name.firstName} 
                       onChange={e => { setName({firstName: e.target.value})}}
                />
                <input type="text"
                    value={name.lastName}
                    onChange={e => { setName({ lastName: e.target.value })}}
                />
            </form>
            <h2>名：{name.firstName}</h2>
            <h2>姓：{name.lastName}</h2>
        </div>
    )
}

export default HookCounterThree

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

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

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

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

这和setState有一些不同。

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

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

如下：

<form>
  <input type="text" 
                 value={name.firstName} 
                 onChange={e => { setName({...name, firstName: e.target.value})}}
  />
  <input type="text"
         value={name.lastName}
         onChange={e => { setName({...name, lastName: e.target.value })}}
  />
</form>

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

END.