useEffect,useState 基本用法

import {useEffect,useState} from "react"

export const  SearchPanel = () =>{
    const [param，setParam] = useState({
        name:'',
        personId:''
    })
    const [users,setUsers] = useState([])
    const [list,setList]   = useState([])

        /*

        param 每次改变 都会请求
        async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
        如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果
        看到上面的阻塞一词，心慌了吧……放心，这就是 await 必须用在 async 函数中的原因。async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。
        async/await 的优势在于处理 then 链

        */}
     useEffect(()=>{
        fetch('').then(async response => {
            if(response.ok){
                setList(await response.json())
            }
        },[param])
     })
    return <from>

              {/*
                 下面 的对应解构赋值写法
                 setParam(Object.assign({},param,{name:evt.target.value}))

              */}
                <div>
                    <input type="text" value ={param.name} onChange{evt => setParam({
                    ...param,
                    name:evt.target.value
                    }) />
                    <select
                    value = {param.personId}
                    onChange{evt => setParam({
                                        ...param,
                                        personId:evt.target.value
                                        })
                    >
                        <option value="">负责人</option>
                        {
                            users.map(user => <option value={user.id}>{user.name}</option> )
                        }
                    </select>
                </div>


           </from>
}