Time: 20200126

在前面的例子中，用的是數(shù)值型的變量，現(xiàn)在使用對(duì)象型變量。

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

寫(xiě)個(gè)再?gòu)?fù)雜點(diǎn)的例子：

import React, {useState} from 'react'

function HookCounterThree() {
    const [name, setName] = useState({firstName: '', lastName: ''})
    return (
        <div>
            {/*用于獲取輸入數(shù)據(jù) */}
            <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

這種寫(xiě)法能夠?qū)崟r(shí)顯示更新，但是存在一個(gè)問(wèn)題是，后者會(huì)覆蓋前面的內(nèi)容。

進(jìn)入到第一個(gè)輸入框，第二個(gè)輸入框也會(huì)清空。

應(yīng)該是setName時(shí)，數(shù)據(jù)沒(méi)有按照匹配更新，導(dǎo)致另一個(gè)參數(shù)為空。

問(wèn)題的原因：useState不會(huì)自動(dòng)merge變化。

這和setState有一些不同。

所以我們用...操作符即可解決。

這個(gè)和reducer這里，傳遞action數(shù)據(jù)包效果是一樣的，也需要對(duì)當(dāng)前狀態(tài)展開(kāi)，然后再按照新的數(shù)據(jù)包修改。

如下：

<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>

這就是展開(kāi)操作符的妙用。

END.