React Hooks：傳遞 state 道具不是 function？

Question

我將 state 鈎子作為道具傳遞給我的組件，我的“setCity”工作得很好，但是當我嘗試實現 setFlag 時，我收到一條錯誤消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”

那為什么我可以設置city的值而不能設置flag呢？ 我將道具從“應用程序”傳遞給“頁腳”，然后傳遞給“搜索欄”。

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

Answer 2

你還在面對嗎？

Uncaught TypeError: setCity is not a function

const { setCity=()=>{}, setFlag=()=>{} } = props

React Hooks：傳遞 state 道具不是 function？

問題描述

2 個解決方案

解決方案1
3 已采納 2021-02-13 19:34:14

解決方案2
-1 2022-11-23 14:28:41

React Hooks：傳遞 state 道具不是 function？

問題描述

2 個解決方案

解決方案1 3 已采納 2021-02-13 19:34:14

解決方案2 -1 2022-11-23 14:28:41

解決方案1
3 已采納 2021-02-13 19:34:14

解決方案2
-1 2022-11-23 14:28:41