React Hooks：传递 state prop 不是一个函数？

Question

我正在将状态挂钩作为 props 传递给我的组件，我的 'setCity' 工作得很好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not一个函数

那为什么我可以设置city的值却不能设置flag呢？我将道具从 'App' 传递到 'footer'，然后传递到 'searchbar'。

function App(){
  const [city, setCity] = useState("");
  const [flag, setFlag] = useState("");
  return (
    <div className='container'>
      <Header className='header' />
      <Body className='body' city={city} flag={flag}/>
      <Footer className='footer' setCity={setCity} setFlag={setFlag}/>
    </div>
  );
}

function Footer({setCity}, {setFlag}){
    return(
        <div className='footer'>
            Footer
            <Searchbar className='searchbar' setCity={setCity} setFlag={setFlag}/>
        </div>
    )
}

function Searchbar({setCity}, {setFlag}){

    handleChange = (e) =>{
        e.preventDefault();
        console.log(e.target.value);
        setCity(e.target.value);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        console.log("submitted");
        setFlag(false);
    }
    return(
        <div className='searchbar'>
            <form>
                <select defaultValue="default" onChange={handleChange}>
                    <option value="default" disabled>Choose a state...</option>
                    <option value="Alabama">Alabama</option>
                    <option value="Alaska">Alaska</option>
                    ...
                </select>
                <button type="button" onClick={handleSubmit}>Search</button>
            </form >
        </div>
    );
};

Answer 1

所有的道具都作为组件的第一个参数传递，

function Searchbar({setCity}, {setFlag}){

应该是

function Searchbar({setCity, setFlag}){

同申请Footer

React Hooks：传递 state prop 不是一个函数？

React Hooks: Passing state prop is NOT a function?

javascript

reactjs

react-props

react-state-management

react-hooks