React对 state 进行保留和重置 （默认行为导致的错误）

* ContactList.js
export default function ContactList({
    selectedContact,
    contacts,
    onSelect
}) {
    return (
        <section className="contact-list">
            <ul>
                {
                    contacts.map(contact =>
                        <li key={contact.email}>
                            <button onClick={() => {
                                onSelect(contact)
                            }}>
                                {contact.name}
                            </button>
                        </li>)
                }
            </ul>
        </section>
    )
}
* Chat.js

import { useState } from 'react'
export default function Chat({ contact }) {
    const [text, setText] = useState('')
    return (
        <section className="chat">
            <textarea
                value={text}
                placeholder={'Chat to ' + contact.name}
                onChange={e => setText(e.target.value)}
            /><br />
            <button>发送给{contact.email}</button>
        </section>
    )
}


* Message.js
/**
 * 组件中对State进行保留和重置 🥑🥑🥑
 * 重新渲染一个组件时，React需要决定组件树中的哪些部分需要保留、更新、丢弃或重新创建
 * React会保留树中和之前渲染的组件树“匹配”的部分
 * 可能出现的情况：输入内容后再切换收件人并不会清空输入框，可能会导致用户不小心发错消息 😃归因于React默认行为会保留部分状态
 * 👨‍🚒 可通过向组件传递一个唯一key => <Chat key={mail}/> 来强制重置其状态
 * 如果收件人不同，应将其作为一个不同的Chat组件，需要使用新数据和UI（eg:输入框）来重新创建
 * 在接收者之间切换时就会重置输入框 ===》即使渲染的是同一个组件
 */

import { useState } from "react";
import ContactList from './ContactList'
import Chat from './Chat'
const contacts = [
    { name: 'Taylor', email: 'taylor@mail.com' },
    { name: 'Alice', email: 'alice@mail.com' },
    { name: 'Bob', email: 'bob@mail.com' }
  ];
function Messenger() {
    const [to, setTo] = useState(contacts[0])
    return ( <>
        <main>
            <ContactList
                contacts={contacts}
                selectedContact={to}
                onSelect={contact => setTo(contact)}
            />
            <Chat contact={to} key={to.email}/>
        </main>
    </> );
}

export default Messenger;