Question

我将状态钩子作为道具传递给我的组件，我的“setCity”工作得非常好，但是当我尝试实现 setFlag 时，我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function”

那为什么我可以设置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

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

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

应该

function Searchbar({setCity, setFlag}){

同样适用于Footer

React Hooks：传递状态道具不是函数？

1 个答案: